• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Tablas Responsive en WordPress sin plugins

Tablas Responsive en WordPress sin plugins

Tablas Responsive en WordPress

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

css js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Tabla responsive CSS

 

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.

Ejemplo tabla completa

 

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:

Tabla responsive columnas resumen

 

 

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.

Tabla completa cambio estructura

 

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:

Tabla responsive cambio estructura final

 

¿Aún con dudas?, el siguiente video explica cada uno de los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 4,75 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Grégor

    8 noviembre, 2016

    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.

  2. Juan

    5 diciembre, 2017

    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.

    • Jhon Marreros Guzmán

      6 diciembre, 2017

      Hola Juan
      Que bueno que te sirvió, tomaré la sugerencia para el formulario de suscripción. Saludos.

  3. Álvaro

    11 mayo, 2018

    Muchas gracias por el aporte.
    Una duda. Cómo podría mantener siempre visible el selector horizontal para que sea más intuitivo?

    Saludos

    • Jhon Marreros Guzmán

      11 mayo, 2018

      Hola, supongo que te refieres al punto 1, en el código prueba con: overflow-x: visible;
      en lugar de: overflow-x: auto;

  4. Franklin

    14 diciembre, 2019

    Excelente gracias por el aporte voy a implementarlo ya en un sitio para ver que tal queda.

  5. Ainoa

    8 marzo, 2021

    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!

    • Jhon Marreros Guzmán

      8 marzo, 2021

      Excelente!. Saludos 🙂

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cambiar el logo en la versión móvil de tu sitio Web

Agregar el slug blog en las urls de las entradas de WordPress

Agregar super administrador a multisitio de WordPress

Redireccionar las páginas de adjuntos en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados