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 ;)

• Tags:
• jquery
• css
• responsive