Tabla con cabecera fija solo con CSS

Hoy en día, CSS ha evolucionado mucho. Con la llegada de CSS3 se pueden crear más estructuras y/o diseños mucho más fácil que antes.

Por ejemplo, para mi siempre ha sido muy útil que una tabla con muchos datos, tenga una cabecera fija que te siga con el scroll para no perder la referencia del significado de las columnas.

Antiguamente, hará unos 10 años, era bastante complicado conseguir este efecto.

Incluso, algunos programadores crearon plugins con JavaScript para conseguir una tabla con cabecera fija.

Pues bien, en las hojas de estilos en cascada ahora puedes agregar un posicionamiento con valor «sticky» justamente para permitirte conseguir elementos fijos en la pantalla aunque la barra de scroll sea desplazada.

En este artículo vas a descubrir como crear una tabla con cabecera fija. Una tabla en la que su cabecera te sigue con el scroll para mantenerla siempre visible.

Estructura HTML de la tabla

En el ejemplo en funcionamiento verás una tabla con todos sus elementos principales:

• Cabecera <thead>
• Cuerpo <tbody>
• Pie de tabla <tfoot>

Tal y como puedes observar a continuación:

Source code

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellidos</th>
            <th>Edad</th>
            <th>Nómina</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>56</td>
            <td>2.560€</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>56</td>
            <td>2.560€</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>56</td>
            <td>2.560€</td>
        </tr>
        ...
    </tbody>
    <tfoot>
        <tr>
            <th colspan="3">Total</th>
            <th class="text-center">7.680 €</th>
        </tr>
    </tfoot>
</table>

La idea es tener una tabla con muchas filas.

En la ilustración anterior te darás cuenta que tan solo hay 3 elementos y puntos suspensivos.

Te lo dejo así para que no ocupe demasiado el código de ejemplo.

La idea es que tu lo rellenes con más datos.

Estilos generales de la tabla

Definir el diseño general de tu tabla lo dejaré a tu aire.

Puedes copiar literalmente los estilos del código del ejemplo en funcionamiento pero, si no tienes ni idea de como maquetar la tabla de forma general, puedes darle un vistazo al siguiente tutorial:

Tablas con CSS

Posicionamiento fijo a la cabecera de la tabla

Para que tu tabla tenga una cabecera fija tan solo tienes que agregar los siguientes estilos a la etiqueta <thead> de tu tabla.

Algo como lo que sigue a continuación:

Source code

thead {
    position: sticky;
    top: 0;
}

Un elemento posicionado fijamente es un elemento cuyo valor de position computado es sticky.

Este elemento es tratado como un elemento posicionado relativamente hasta que su bloque contenedor cruza un límite establecido (como por ejemplo dando a top cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como «fijo» hasta que alcance el borde opuesto de su bloque contenedor.

En este caso, me interesa definir un top con valor 0 para que cuando la cabecera de la tabla llegue a la posición 0 del view port, haciendo scroll, se aplique el efecto.

Conclusiones

Gracias a dios, el lenguaje CSS ha evolucionado mucho y las nuevas generaciones lo tienen más fácil para conseguir diseños más atractivos y usables con menos esfuerzo.

Crear tablas con cabecera fija fácilmente es una de las muchas posibilidades que se pueden hacer gracias a CSS3.

¿Conocías esta propiedad? ¿Lo usas en tus proyectos?