examples - Cómo hacer una tabla desplazable con encabezados fijos usando CSS

table css bootstrap (2)

Lo que quiere hacer es separar el contenido de la tabla del encabezado de la tabla. Solo desea que se desplacen los <th> elementos. Puede definir fácilmente esta separación en HTML con los elementos <tbody> y <thead> .
Ahora que el encabezado y el cuerpo de la tabla aún están conectados entre sí, aún tendrán el mismo ancho (y las mismas propiedades de desplazamiento). Ahora, para dejar que ''no funcionen'' más como tabla, puede configurar la display: block . De esta manera, <thead> y <tbody> están separados.

table tbody, table thead { display: block; }

Ahora puede configurar el desplazamiento al cuerpo de la tabla:

table tbody { overflow: auto; height: 100px; }

Y, por último, como <thead> ya no comparte el mismo ancho que el cuerpo, debe establecer un ancho estático en el encabezado de la tabla:

th { width: 72px; }

También debe establecer un ancho estático para <td> . Esto resuelve el problema de las columnas desalineadas.

td { width: 72px; } Tenga en cuenta que también le faltan algunos elementos HTML. Cada fila debe estar en un elemento <tr> , que incluye la fila del encabezado:

<tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr>

Espero que esto es lo que querías decir.

jsFiddle

Esta pregunta ya tiene una respuesta aquí:

¿Cómo agregar una barra de desplazamiento a una tabla HTML5? 14 respuestas

Quiero hacer que el encabezado de mi tabla sea fijo. La tabla está presente dentro del div desplazable. Vea mi código aquí: http://jsfiddle.net/w7Mm8/114/ amablemente sugiérame la solución a esto.

Gracias

Mi código:

<div style="position: absolute; height: 200px; overflow: auto; "> <div style="height: 250px;"> <table border="1"> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> </table> </div> </div>

Puedo pensar en una forma descarada de hacerlo, no creo que esta sea la mejor opción, pero funcionará.

Cree el encabezado como una tabla separada, luego coloque el otro en un div y establezca un tamaño máximo, luego permita que el desplazamiento entre en el overflow .

table { width: 500px; } .scroll { max-height: 60px; overflow: auto; }