artículo escrito por Luisinho
Luisinho
13-09-2020
Crear tablas responsive con CSS y jQuery

Bueno, hace siglos que no escribía un artículo... demasiado, pero bueno, retomaré el blog para añdir códigos que uso en mi CMS para la creación de mis páginas web.

En este caso vamos acombinar CSS y jQuery para crear tablas responsive de una forma rápida e intuitiva, además lo dejaremos todo listo para poder reutilizar el código en cualquier momento.

El primer paso para crear una tabla responsive es, evidentemente, tener tu tabla en HTML. Me imagino, que la mayoría crean sus tablas con un un editor wysiwyg (What You See Is What You Get), deberéis editar el HTML creado para poder indicar cuál es tu cabecera (thead) y cuál el cuerpo de la tabla (tbody), dentro de la cabecera indicaremos que la celdas serán del tipo th en vez de las típicas td.

<table class="tablaMovil">
<thead>
<tr>
<th>Mis Cabeceras</th>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
<th>Cabecera 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Art&iacute;culo 1</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>Art&iacute;culo 2</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>

Fijaros, que a mi tabla le he indicado que tendrá el estilo "tablaMovil", ya verémos porqué... bueno, ¿porqué esperar? le indicamos esta clase, porque tal vez no quiera que todas mis tablas sean responsive del mismo modo (en este artículo de www.eureka.es podrás ver diversas soluciones, yo por ahora me quedo con esta adaptándola a mis necesidades XD).

Bien, dicho esto, aplicaremos nuestro CSS a la tabla:

@media screen and (max-width: 600px) {
table.tablaMovil {
width:100%;
}
table.tablaMovil thead {
display: none;
}
table.tablaMovil tr:nth-of-type(2n) {
background-color: inherit;
}
table.tablaMovil tr td:first-child {
color: #FFFFFF;
background-color: #757575;
font-weight:bold;
font-size:1.3em;
}
table.tablaMovil tbody td {
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
display: block;
text-align: left;
}
table.tablaMovil tbody td:before {
content: attr(data-th);
position: absolute;
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}

Fijaros que este estilo sólo se aplicará a las tablas cuando el navegador tenga menos de 600px de ancho. Y lo que realizará en estos casos es ocultar las cabeceras de nuestra tabla con el estilo "table.tablaMovil thead", añadir ciertos estilos a las celdas de las tablas y lo más importante, añadir con el estilo "table.tablaMovil tbody td:before" un texto justo delante de la celda, que lo recogerá del atributo "data-th" de si misma... pero... si ese atributo no lo hemos incluido!!! Lo podríamos hacer manualmente... pero si tenemos 8 columnas?? y si fueran más tablas?? aquí es donde entra jQuery.

Antes de pegar el código que uso, lo voy a explicar... lo primero que tenemos que hacer es pensar que pudiera tener muchas tablas... con lo que tendré que recorrer todas...

$('table.tablaMovil').each( function(){

});

Al pasar por cada tabla, deberemos coger los textos de cada columna en la cabecera, es decir las que hay en thead, lo metermos en un array.

$('table.tablaMovil').each( function(){
var cabecera=[];
$(this).find('thead th').each( function(index){
cabecera[index]=$(this).html();
});
});

Una vez que tenemos esta información, podremos recorrer todas las celdas del tbody y añadir el atributo "data-th".

$('table.tablaMovil').each( function(){
var cabecera=[];
$(this).find('th').each( function(index){
cabecera[index]=$(this).html();
});
$(this).find('tr').each( function(){
for(var c=0; c<cabecera.length; c++)
{
$(this).find('td:eq('+c+')').attr('data-th', cabecera[c]);
}
});
});

Y como personalmente, creo que este script lo voy a usar en más de una ocasión en la misma página... cuando cargue contenido externo con AJAX, pues lo meto en una función para usarlo desde cualquier lugar.

$.tablaMovil = function(){
$('table.tablaMovil').each( function(){
var cabecera=[];
$(this).find('thead th').each( function(index){
cabecera[index]=$(this).html();
});
$(this).find('tbody tr').each( function(){
for(var c = 0; c < cabecera.length; c++)
{
$(this).find('td:eq('+c+')').attr('data-th', cabecera[c]);
}
});
});
}
$.tablaMovil();

Espero que os haya sido útil... y sí, seguro que se puede hacer de otras formas y tal vez más eficaces, pero ésta es la que se me ha ocurrido a mí... si quieres comparte otra solución o comentá cómo mejorar el código ;)

Mis Cabeceras Cabecera 1 Cabecera 2 Cabecera 3
Artículo 1 A B C
Artículo 2 D E F

 

Identifícate en NoEsTanDificil

Área Privada

Anónimo
Regístrate como usuario

Destacados

Bote de bolas de padel / tenis gratis

Buscador

BlogRoll

Galería privada de fotos

Suscripciones

¿quieres recibir un aviso de actualizaciones?

Síguenos en...

Últimos comentarios

 rashp en Instalar apache+php+mysql en Windows y Ubuntu: En algunos casos hay que montar la particion de windows cuan...
 anónimo en Protege a los tuyos de internet: Muchas gracias por la información!!!
 Luisinho en Instalar apache+php+mysql en Windows y Ubuntu: he actualizado el post... parece ser qe ahora, desde la vers...
 ssnc en Curso de Internet para abuelos... NoEsTanDificil¡¡: :O se me hace interesante, quizas tbn nos podrias enseñar d...
 sushimaniberico en Probar buen sake en Palma: Hey! que grata sorpresa. Un millón de gracias por el post. ...
 ssnc en Vaya nevada!!!: u.u Como quisiera yo algo de nieve por aca. Con 30°c no se ...