soy Kseso y esto EsCSS

Regreso a lo básico: tablas con scroll y encabezado fijo en puro Css

Soluciones puro css para tablas con scroll y encabezado y pie fijos. Explicación.

Regreso a lo básico: tablas con scroll y encabezado fijo en puro Css

·Por Kseso ✎ 14

Esta es una cuestión resuelta hace mucho, mucho tiempo. Sin embargo no está de más recuperar de vez en cuando realizaciones veteranas y plénamente funcionales para quienes se incorporan.

Así que aquí van unos ejemplos de tablas con el encabezado fijo (siempre visible) al hacer scroll en el cuerpo (tbody) de la tabla.

Ejemplos a desechar

Si me permites, antes de las soluciones válidas, déjame decirte que descarto otras pese a que su técnica esté muy extendida e incluso se vea recomendada.
Me estoy refiriendo a aquellos planteamiento que se basan en "romper la tabla". Esto es, sacar el encabezado de la tabla a la que pertenece, ya sea creando dos tablas o cualquier otro elemento conteniendo los datos del thead más la tabla sin thead.
Sea como sea, se rompe la naturaleza y semántica de los datos en pos de la estética (apariencia) o de una funcionalidad: scrool y una fila permanente.

Artículo complementario

Bastante después de publicar este artículo he publicado otras formas más sencillas y fáciles de adaptar a cada circunstancia.

Responsive table con scroll en el Tbody y encabezado fijo en puro Css

From table to tabs pure Css Incluye 2 demos

Tablas puras con scroll y encabezado fijo

Stu Nicholls en CSSPlay

Esta realización de @stucssplay en CSSPlay incluye dos ejemplos distintos, y añade la particularidad de que además de tener el encabezado fijo (siempre visible) al hacer scroll en la tabla, el pie de tabla (tfoot) también lo es.

tabla con encabezado fijo y scroll

Si te fijas en la primera tabla, hay dos div´s anidados que contienen a la tabla.

<div class="outer"> <div class="innera"> <table

El div exterior (".outer") tiene un padding en superior e inferior que es donde se coloca el thead y el tfoot
El segundo div (".innera") es el que tiene declarado la altura y el scroll en auto. Es éste el que realiza el desplazamiento.
Y como es lógico, tanto el segundo div (".innera") como la tabla deben tener position: static Para que el encabezado y el pie de la tabla tomen como referente el primer div (".outer") que está como relative.

La segunda tabla tiene un marcado ligeramente diferente:

<table> <caption>ARRIVALS</caption> <thead>...</thead> <tfoot>...</tfoot> <tbody> <tr> <td colspan="5"> <div class="innerb"> <table class="tabletwo"> <tbody> datos que hacen scroll </tbody> </table> </div> </td> </tr> </tbody> </table>

Como ves, dentro de la tabla hay un div (".innerb") que contiene una segunda tabla con los datos. Es este div el que al tener una altura declarada y overflow: auto el que hace el scroll.

imaputz.com

En imaputz.com tienes esta realización. Muy, muy, muy veterana. Fíjate qué navegadores y versiones referencia al hablar de su compatibilidad.

En el ejemplo tienes un enlace a otra tabla con encabezado fijo y scroll más compleja (en cuanto a los elementos que integra dentro de ella).

tabla con encabezado fijo y scroll

En este ejemplo tenemos una tabla pura, sin marcado o elementos añadidos como en los dos ejemplos anteriores. Así que la pregunta es: ¿cómo funciona?.
Pues al igual que ocurría en Futurama. ¿Recuerdas?:

bender Fry: Maldita sea, tendremos que arreglar el motor nosotros mismos.
Leela: ¡No podemos, imbécil! Nadie sabe cómo funciona. ¡Es imposible!
Cubert: Nada es imposible. Ahora entiendo cómo funcionan los motores. Se me ocurrió en un sueño (y lo olvidó en otro). Los motores no mueven la nave. La nave se queda quieta y los motores mueven el universo a su alrededor.
Bender: Eso es una mierda enorme.
Cubert: Nada es una mierda enorme. No si puedes imaginarlo. Eso es lo que significa ser un "jugón de Css".

Al igual que en Futurama, en esta realización no es sobre el thead sobre el que actúan los motores (o el Css, que viene a ser lo mismo). Es sobre el tbody. Y tan sencillo como:

tbody.scrollContent { display: block; /*obligado*/ height: 262px; /*la que necesites*/ overflow: auto; /*obligado*/ width: 100%; }

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso