Mantener la cabecera fija en una tabla usando Jquery

Alexander

Diseño

April 7, 2014
0 Comments

Existen numerosas librerías en Internet que te permiten fijar la cabecera, pero decidimos crear una simple para nuestros reportes que cumpla con una sola tarea que es la de fijar cabeceras agregándole una clase.

La solución consiste en.

1. Dar la correcta estructura a tu tabla, agregando la clase “fixed”

1
2
3
4
5
6

<table class="fixed">
<caption></caption> (Opcional)
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>

2. Agregar la librería en tu <head> o tu <footer> como le tengas gusto. Siempre ponerlo después de llamar al jquery 1.7.x o superior.

1	<script src="goheadfixed.js" type="text/javascript"></script>

3. Llamar a la funcion.

1	$(document).ready(function() { goheadfixed('table.fixed'); });

Para los desarrolladores.

Clonamos la tabla
Quitamos el caption a la tabla clonada.
No podemos quitar el cuerpo (<tbody>) a la clonada porque sino la cabecera se redimensiona y no queda igual. Así que sólo la ocultamos
Colocamos la tabla clonada encima de la original, recuerda que la clonada hemos ocultado el cuerpo.
Interactuamos con el top del Scroll para saber cuando choca con la tabla clonada, y aumentar el top a la clonada dando la sensación que se mantiene fija.
Funcionará lento en IE, ya sabes, porque es IE.

En conclusión: son 2 tablas una encima de la otra.

Descarga la función: Descargar
Miralo online : http://jsfiddle.net/gonzalesc/USbUG/