Como crear tablas con cabecera fija y que se puedan ordenar y hacer scroll

En este artículo vamos a ver cómo crear tablas con cabecera fija para que sus campos se puedan ordenar y que, además, pueda hacerse scroll en el contenido de dicha tabla. Para este tutorial utilizaremos HTML y CSS y algo de Javascript para poder ordenar el contenido. Este elemento viene muy bien para la implementación de back offices en donde mostramos los registros de una tabla concreta de nuestra base de datos. En este tutorial, intentaremos hacerlo de manera sencilla para que todo desarrollar web pueda implementarlo en sus propios proyectos. ¿Estás preparado para crear tu tabla sortable sin ayuda de librerías ni desarrollos de terceros? Pues vamos a ello.

Para este tutorial he recogido de diversos artículos de Internet todos los códigos necesarios para realizar una tabla scrollable con cabecera fija y que encima se pueda ordenar. Sé que es un reto y que ahorraría mucho más tiempo implementándolo con una librería, pero me gustaba embarcarme en esta trifulca. Echa un vistazo a estos consejos y fíjate en el uso de elipses para controlar el text overflow. Por aclarar, esta tabla se ha testeado en los principales navegadores del mercado como Chrome, Firefoz, Safari y Edge.

Este es el CSS que hay que utilizar para crear una tabla con cabecera fija con la característica de que sus datos se puedan ordenar y que encima, se pueda hacer scroll en ella. La única sección que requiere un poco de atención por tu parte es cuando se establece el ancho de la tabla y el ancho de las columnas. Usando LESS esto sería mucho más sencillo.

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Esta sección se ocupa del overflow del texto (elipsis) */
table.scroll div
{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Configuracion del ancho de las columnas */
/* ESTO ES IMPORTANTE El ancho de la tabla debe coincidir con el total del ancho de las columnas*/

table.scroll tr th.number,
table.scroll tr td.number
{width:30px;}

table.scroll tr th.pageidentifier,
table.scroll tr td.pageidentifier
{width:255px;}

table.scroll tr th.title,
table.scroll tr td.title div
{width:150px;}

table.scroll tr th.summary,
table.scroll tr td.summary div
{width:230px;}

table.scroll tr th.filename {width:223px;}
table.scroll tr td.filename div{width:202px;}

table.scroll {width:940px;}

/* ------------------------------------------------------------------------- */
/* El 'CSS Engine' para quela tabla sea scrollable */
/* Este es el código que hace a la tabla scrollable y que cuente con una cabecera fija */

table.scroll tbody,
table.scroll thead { display: block; }

table.scroll tbody {
    height: 600px;
    overflow-y: auto;
    overflow-x: auto;
}

/* Fin del 'Engine' */
/* ------------------------------------------------------------------------- */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

Como os he comentado antes, hay un montón de ejemplos muy prácticos para llevar a cabo tablas perfectas (jQuery DataTable; jqGrid; etc.), pero si necesitas una solución ligera y simple para crear una tabla estática con miles y miles de filas, esta puede ser una solución más que factible.

Espero que te haya gustado este tutorial y, ya sabes, puedes dejarnos tus impresiones en la zona de comentarios que hay un poco más abajo de este texto. ¡Feliz código amigos!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP