Tablas Responsive en WordPress sin plugins

[ 6 noviembre 2016 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

Seguramente tienes alguna tabla como parte del contenido de tu sitio Web, sin embargo algunos themes no tienen la funcionalidad de tablas responsive, si este es tu caso puedes evaluar agregar este comportamiento a través de código.

En este artículo veremos cómo hacer una tabla responsive en WordPress a través de diferentes métodos, desde ocultar elementos hasta reposicionarlos para que se muestre correctamente en móviles.

La tabla de ejemplo HTML la puedes descargar desde este enlace

1- Tabla Responsive usando un Contenedor

La manera más simple de volver una tabla responsive es a través de CSS y un contenedor, es decir la tabla tiene que estar dentro de una etiqueta HTML contenedora, como por ejemplo un <div></div>, y este contenedor tiene que tener establecida la propiedad overflow-x .


<div style="overflow-x: auto;">
<table>
	<thead>
		<!-- cabecera -->
	</thead>
	<tbody>
		<!-- contenido -->
	</tbody>
</table>
</div>

En el código anterior se ha usado overflow-x:auto, esto permite al contenedor tener un scroll horizontal tal como se muestra a continuación.

Evidentemente en lugar de colocar un estilo en línea podemos usar también una clase.

2- Tabla Responsive como Resumen

Esta sería otra opción, podemos mostrar un resumen de nuestra tabla en móviles y ocultar las columnas de detalle.

Si tenemos una tabla similar a la de la siguiente imagen, podemos ocultar todas las columnas excepto los nombres y los totales.

Para conseguir esto podemos usar el siguiente código CSS:


/*Sólo para tamaños de pantalla <=678px*/
@media (max-width:678px){

	/*Ocultamos todas las celdas*/
	table td,
	table th{
	  display:none;
	}

	/*Mostramos las celdas sólo de la primera y última columna*/
	table td:first-child,
	table th:first-child,
	table td:last-child,
	table th:last-child{
	  display:table-cell;
	}

}

En el código anterior hemos ocultado inicialmente todas las celdas, tanto las celdas de la cabecera como del contenido, luego hemos mostrado las celdas de la primera fila y de la última fila, el resultado será algo similar a la siguiente imagen:

3- Tabla Responsive cambiando Estructura HTML

En este caso usaremos CSS y Javascript para variar la estructura de la tabla cuando se muestre en móviles. La idea es repetir las cabeceras para cada celda de contenido.

Tenemos la siguiente estructura HTML de tabla


<table>
	<thead>
		<!-- cabecera -->
	</thead>
	<tbody>
		<!-- contenido-->
	</tbody>
</table>

Usaremos el siguiente código CSS:


@media screen and (max-width: 678px) {
	table {width:100%;}
	thead {display: none;}
	tr td:first-child {background: #eee;}
	tbody td {display: block;  text-align:center;}
	tbody td:before { 
	    content: attr(data-th); 
	    display: inline-block;
	    margin-right:10px;
	    text-align:center;  
	  }
}

En el código anterior:

Validamos para anchos de pantalla <= 678px
Ocultamos la cabecera de la tabla
Destacamos el primer elemento (Nombre)
Las celdas se mostrarán como bloques (uno debajo de otro)
Insertamos antes de cada celda el contenido de la cabecera obtenida por javascript (data-th)

El código javascript tomado de referencia será el siguiente:


var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");

for (var i = 0; i < headers.length; i++) {
	headertext[i]=[];
	for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
	  var current = headrow;
	  headertext[i].push(current.textContent);
	  }
} 

for (var h = 0, tbody; tbody = tablebody[h]; h++) {
	for (var i = 0, row; row = tbody.rows[i]; i++) {
	  for (var j = 0, col; col = row.cells[j]; j++) {
	    col.setAttribute("data-th", headertext[h][j]);
	  } 
	}
}

Para este código:

Este código javascript debe ser colocado al final antes de </body>.
lo que hace este código es establecer en la propiedad data-th de cada celda del cuerpo de la tabla el valor de la cabecera
El valor de data-th es tomado en el código CSS anterior.
Si tienes dudas de cómo agregar código javascript en tu sitio revisa este enlace

Usando el código CSS y Javascript anterior entonces tendremos como resultado algo similar a lo que se muestra en la siguiente imagen: