Estoy intentando montar una tabla para ver una serie de datos y resulta que como tiene demasiadas columnas, esta es más ancha que mi pantalla y se sale, a continuación muestro en pantalla el problema.
Según he leído, para solucionar esto debo emplear en mi css
el atributo overflow-x:scroll
. Pero cómo se ve en la imagen, esto lo consigo a rasgos generales, pero no para la tabla, que es donde yo quiero forzar.
Este es mi código html. Los datos los paso por javascript.
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped">
<thead class="thead-dark">
<tr id="cols_table"></tr>
</thead>
<tbody id=body_table>
</tbody>
</table>
</div>
</div>
</div>
Y mi css he probado forzando un tamaño (cosa que no quiero)
.table{ height: auto; width: 600px; overflow-x: scroll; }
y también, dejando que se adapte al div
, pero ninguna va.
.table{
height: auto;
width: 90%;
overflow-x: scroll;
}
También he probado a forzar que la tabla entre en mi div
pero se solapa todo...
.table{
table-layout: fixed;
width: 100%;
}
¿Como hago para que mi tabla no exceda el tamaño de mi pantalla y se ponga la barra de scroll?