Tabla con cabeceras fijas en jQuery

Las tablas suelen darnos dolores de cabeza a la hora de incorporarlas en los diseños, quizás sea por su naturaleza rígida o quizás es porque en un pasado bastante lejano, eran completamente incompatibles con las formas que luego se implementaron con la inclusión del CSS, las variaciones de HTML y las normas W3C.

Como todo en Internet se desarrolla para encajar, hoy en día podemos utilizar las tablas en cualquier entorno y si nos basamos en los nuevos métodos de construcción, podríamos decir que no tendremos inconvenientes.

Pero qué sucede cuando tenemos una gran cantidad de datos y necesitamos que los usuarios puedan acceder a la información de forma directa, cómoda y al mismo tiempo mantener el atractivo. Esta metodología puede ser una excelente solución al momento de desplegar tablas de gran tamaño ya que al fijarse sus cabeceras acompañarán al usuario a medida que se mueve a través de ellas.

Sticky Table Headers

El tutorial presenta tres opciones de movimiento, en el primer caso se trata de una tabla con menú superior, que va bajando a medida que nos movemos a través de ella. En el segundo caso, el movimiento es similar al anterior, pero contamos con una barra lateral de fijación de datos que también necesita ser destacada. En estos dos ejemplos, el movimiento es vertical y la tabla es angosta, no ocupa más espacio que el ancho del lienzo contenedor.

El tercero y último nos ofrece una opción lateral en una tabla que se desplaza de forma horizontal, fijando el alto es la primer columna la que nos acompaña a lo ancho de todo el movimiento.

Podrán encontrar toda la información relacionada al funcionamiento, el código y la forma de implementar estas tablas en el tutorial de Codrops sobre Sticky Table Headers & Columns y también ver las demos de tres opciones que se plantean de Sticky Table Headers, aunque una vez que hayan podido elaborar cualquiera de ellas, pueden encontrar más opciones modificando variables que les sean necesarias para su propio proyecto.

Categorizado en: