Cómo mostrar siempre las cabeceras de las tablas

Esta semana vamos a ver cómo podemos mostrar siempre las cabeceras de las tablas. Un efecto muy interesante que he visto en css-tricks.com y que he querido compartir con vosotros, ya que me ha recordado a una opción muy interesante que podemos hacer en Word y en Excel 🙂

Importante
No he tenido tiempo para probar este tutorial, por lo que te recomiendo encarecidamente que antes de que tú lo pruebes, hagas una copia de seguridad de tu web.

Introducción

Seguramente, en más de una ocasión has necesitado mostrar las cabeceras de las tablas cuando trabajas con tablas muy grandes. Me explico, tienes una serie de datos tabulados en una tabla que contiene cabeceras para varias columnas, pero a medida que vas haciendo scroll, los datos van subiendo y llega un momento en que pierdes de vista las cabeceras de las columnas.

Esto es un engorro, ya que tienes que subir hasta que se vean las cabeceras de nuevo y así saber a qué corresponden los datos de cada columna.

Pues bien, hoy aprenderemos a hacer que esas cabeceras se mantengan fijas mientras hacemos scroll, con lo que siempre sabremos qué tipo de datos se nos muestra en cada columna.

Códigos que vamos a utilizar para mostrar siempre las cabeceras de las tablas

El código que vamos a utilizar para mostrar siempre las cabeceras de las tablas es el siguiente:

function UpdateTableHeaders() {
$("div.divTableWithFloatingHeader").each(function() {
offset = $(this).offset();
scrollTop = $(window).scrollTop();
if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
$(".tableFloatingHeader", this).css("visibility", "visible");
$(".tableFloatingHeader", this).css("top", Math.min(scrollTop - offset.top, $(this).height() - $(".tableFloatingHeader", this).height()) + "px");
}
else {
$(".tableFloatingHeader", this).css("visibility", "hidden");
$(".tableFloatingHeader", this).css("top", "0px");
}
})
}
$(document).ready(function() {
$("table.tableWithFloatingHeader").each(function() {
$(this).wrap("<div class="divTableWithFloatingHeader" style="position:relative"></div>");
$("tr:first", this).before($("tr:first", this).clone());
clonedHeaderRow = $("tr:first", this)
clonedHeaderRow.addClass("tableFloatingHeader");
clonedHeaderRow.css("position", "absolute");
clonedHeaderRow.css("top", "0px");
clonedHeaderRow.css("left", "0px");
clonedHeaderRow.css("visibility", "hidden");
});
UpdateTableHeaders();
$(window).scroll(UpdateTableHeaders);
});

Además de este código JavaScript, necesitamos un código CSS para formatear la tabla y, evidentemente, el código HTML de la tabla.

Código CSS:

.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
}
#page-wrap {
width: 500px;
margin: 100px auto;
}
.spacer {
height: 600px;
}
table {
border-collapse: collapse;
}
th {
background-color: lightgrey;
padding: 10px;
width: 200px;
text-align: left;
}
tr:nth-child(odd) {
background: #eee;
}
td {
padding: 10px;
width: 200px;
}
.some-other-area {
margin: 300px 0;
line-height: 2;
}
h2 {
background: lightgrey;
padding: 10px;
font: 28px Georgia, Serif;
margin: 0 0 20px 0;
}

Y el código HTML (el de la tabla), puede ser este mismo:

<div id="page-wrap">
<h1>Persistent Headers</h1>
<p>Scroll down and watch the table headers stay with the table when they normally would be scrolled off the screen.</p>
<table class="persist-area">
<thead>
<tr class="persist-header">
<th>Column One Header</th>
<th>Column Two Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>table1 data1</td>
<td>table1 data1</td>
</tr>
<tr>
<td>table1 data2</td>
<td>table1 data2</td>
</tr>
<tr>
<td>table1 data3</td>
<td>table1 data3</td>
</tr>
<tr>
<td>table1 data4</td>
<td>table1 data4</td>
</tr>
<tr>
<td>table1 data5</td>
<td>table1 data5</td>
</tr>
<tr>
<td>table1 data6</td>
<td>table1 data6</td>
</tr>
<tr>
<td>table1 data7</td>
<td>table1 data7</td>
</tr>
<tr>
<td>table1 data8</td>
<td>table1 data8</td>
</tr>
<tr>
<td>table1 data9</td>
<td>table1 data9</td>
</tr>
<tr>
<td>table1 data10</td>
<td>table1 data10</td>
</tr>
</tbody>
</table>
<section class="some-other-area persist-area">
<h2 class="persist-header">Some Other Area</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section class="some-other-area persist-area">
<h2 class="persist-header">Some Other Area</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</div>

¿Qué hacen estos códigos?

Código JavaScript: Aunque sea un código complejo, ya podemos imaginarnos lo que hace. Crea una función llamada UpdateTableHeaders que dice que, cuando el scroll vaya hacia arriba como cuando vaya hacia abajo, la cabecera tendrá una visibilidad visible. A continuación se tomará esta función y se le aplicarán unos estilos CSS para formatear la tabla (el documento).

Código CSS: A grandes rasgos formatea la tabla. En este caso el formato aplicado es muy sencillo, sombrea de un color gris las cabeceras de las tablas y también las filas impares de la misma.

Código HTML: Es el código que muestra la tabla y el texto en usados en el ejemplo.

El resultado final puedes verlo en la misma página del tutorial, en la parte inferior.

Fuente: CSS-TRIKCS.COM

De nuevo, recuerda
Debes hacer una copia de seguridad de tu web antes de probar este efecto. Como te he dicho anteriormente. Yo no he probado el tutorial, aunque si es cierto que css-tricks es una de las webs más fiables a nivel mundial.