¿Tabla HTML con encabezados fijos?
¿Existe una técnica CSS/JavaScript entre navegadores para mostrar una tabla HTML larga de modo que los encabezados de las columnas permanezcan fijos en la pantalla y no se desplacen con el cuerpo de la tabla? Piense en el efecto de "congelar paneles" en Microsoft Excel.
Quiero poder desplazarme por el contenido de la tabla, pero poder ver siempre los encabezados de las columnas en la parte superior.
Esto se puede resolver limpiamente en cuatro líneas de código.
Si solo le interesan los navegadores modernos, se puede lograr un encabezado fijo mucho más fácilmente mediante el uso de transformaciones CSS. Suena extraño, pero funciona muy bien:
- HTML y CSS permanecen como están.
- Sin dependencias externas de JavaScript.
- Cuatro líneas de código.
- Funciona para todas las configuraciones (diseño de tabla: fijo, etc.).
document.getElementById("wrap").addEventListener("scroll", function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});
La compatibilidad con transformaciones CSS está ampliamente disponible, excepto en Internet Explorer 8-.
Aquí está el ejemplo completo como referencia:
Mostrar fragmento de código
Estuve buscando una solución para esto por un tiempo y descubrí que la mayoría de las respuestas no funcionan o no son adecuadas para mi situación, así que escribí una solución simple con jQuery.
Este es el esquema de la solución:
- Clona la tabla que necesita tener un encabezado fijo y coloca la copia clonada encima del original.
- Retire el cuerpo de la mesa de la mesa superior.
- Retire el encabezado de la tabla de la tabla inferior.
- Ajuste el ancho de las columnas. (Realizamos un seguimiento de los anchos de columna originales)
A continuación se muestra el código en una demostración ejecutable.
function scrolify(tblAsJQueryObject, height) {
var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four lines below
// and wrap the table with <div> in the mark-up and assign
// height and overflow property
var oTblDiv = $("<div/>");
oTblDiv.css('height', height);
oTblDiv.css('overflow', 'scroll');
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find('thead tr td').each(function() {
$(this).attr("data-item-original-width", $(this).width());
});
oTbl.find('tbody tr:eq(0) td').each(function() {
$(this).attr("data-item-original-width", $(this).width());
});
// clone the original table
var newTbl = oTbl.clone();
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function() {
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr:eq(0) td').each(function() {
$(this).width($(this).attr("data-item-original-width"));
});
}
$(document).ready(function() {
scrolify($('#tblNeedsScrolling'), 160); // 160 is height
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div style="width:300px;border:6px green solid;">
<table border="1" width="100%" id="tblNeedsScrolling">
<thead>
<tr><th>Header 1</th><th>Header 2</th></tr>
</thead>
<tbody>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
<tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>
<tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
<tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
<tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
<tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>
</tbody>
</table>
</div>Esta solución funciona en Chrome e IE. Dado que está basado en jQuery, esto también debería funcionar en otros navegadores compatibles con jQuery.
Acabo de completar la creación de un complemento jQuery que tomará una tabla única válida usando HTML válido (debe tener un encabezado y un cuerpo) y generará una tabla que tiene encabezados fijos, un pie de página fijo opcional que puede ser un encabezado clonado o cualquier contenido que usted eligió (paginación, etc.). Si desea aprovechar monitores más grandes, también cambiará el tamaño de la tabla cuando se cambie el tamaño del navegador. Otra característica adicional es poder desplazarse lateralmente si no todas las columnas de la tabla caben a la vista.
http://fixedheadertable.com/
en github: http://markmalek.github.com/Fixed-Header-Table/
Es extremadamente fácil de configurar y puedes crear tus propios estilos personalizados. También utiliza esquinas redondeadas en todos los navegadores. Tenga en cuenta que lo acabo de lanzar, por lo que técnicamente todavía es beta y hay muy pocos problemas menores que estoy solucionando.
Funciona en Internet Explorer 7, Internet Explorer 8, Safari, Firefox y Chrome.
