Hola,
Estoy embebido en una lucha eterna, por intentar poner un scroll vertical dentro de la etiqueta tbody de una tabla HTML. La tabla tiene 14 columnas, he visitado varios links, pero no lo consigo, lo ideal sería poder hacerlo con Bootstrap, sin tener que usar librerías externas.
¿Alguna idea por favor?
Saludos y gracias,
Respuestas
Hola, supongo que si la tabla tiene 14 columnas lo que quieres es scroll horizontal y no vertical.
Para conseguirlo tienes que definir un ancho fijo al <tbody> y <thead> de la tabla y definir la propiedad overflow-x a auto:
thead { width: 500px; overflow-x: auto; } tbody { width: 500px; overflow-x: auto; }
En el caso de que también quieras scroll vertical puedes utilizar la opción overflow-y en el body
@javiermadueno
Según esta respuesta de StackOverflow, las propiedades overflow no funcionan en el elemento <tbody>. Para hacerlo funcionar, tienes que cambiar el display del <tbody> a block. Además, para evitar que el diseño de la tabla se rompa, también hay que aplicar el mismo display al elemento <thead>. El resultado sería el siguiente:
thead, tbody { display: block; } tbody { height: 200px; overflow-y: auto; overflow-x: hidden; }
Esta es la solución básica, pero hay muchos otros detalles que deberás tener en cuenta. Por ejemplo, la anchura de las columnas de la tabla. Dependiendo de si quieres todas las columnas de la misma anchura o de anchura fija/variable, etc. tendrás que usar CSS o JavaScript. En la solución que te enlazaba antes explican todos los diferentes casos.
@javiereguiluz