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:

¿Aún con dudas?, el siguiente video explica cada uno de los puntos tratados anteriormente.
Muy útil y sencillo. A veces uno pasa horas buscando un plugin y que sea compatible con tantas herramientas que uno agrega a wordpress pero esta solución es mucho mejor.
Que tal sencillez de la forma que lo explicas y haces. Gracias por el aporte. Justo necesito agregar este tipo de tabla. Por cierto agrega el botón suscribir en tus comentarios estaba buscando para suscribirme y no perder tu blog.
Hola Juan
Que bueno que te sirvió, tomaré la sugerencia para el formulario de suscripción. Saludos.
Muchas gracias por el aporte.
Una duda. Cómo podría mantener siempre visible el selector horizontal para que sea más intuitivo?
Saludos
Hola, supongo que te refieres al punto 1, en el código prueba con: overflow-x: visible;
en lugar de: overflow-x: auto;
Excelente gracias por el aporte voy a implementarlo ya en un sitio para ver que tal queda.
Gracias! Me acabas de salvar! No tenía ni idea de cómo mejorar las tablas para que se visualizaran bien en móviles!!! Ha quedado estupendo!!!! De verdad mil gracias!
Excelente!. Saludos 🙂