Mantener la cabecera fija en una tabla usando Jquery
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/
-
April 24, 2017 -
April 18, 2017
-
February 26, 2012
-
October 20, 2013
- Aplicar Oferta 2×1 en Woocommerce sin pluginsOctober 20, 2013
- Aplicar Oferta 2×1 en Woocommerce sin pluginsOctober 20, 2013
- Personalizar content-single-product.php en Woocommerce 2.1.XOctober 20, 2013
- Personalizar content-single-product.php en Woocommerce 2.1.XOctober 20, 2013
Buscar
Social Media
Warning: file_get_contents(http://graph.facebook.com/224839558274): failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /home/gopymes/blog.gopymes.pe/wp-content/themes/blogmagic/functions/widgets.php on line 451
