Cómo hacer una Tabla HTML Responsive (con HTML y CSS) y sin plugins

Consigue una tabla para tu sitio (WordPress y Divi inclusive)

En este artículo te voy a enseñar cómo hacer una tabla responsive que funciona muy bien, en cualquier sitio, incluidos WordPress, Divi, Elemento o cualquier otro tema o constructor.

Solo vas a necesitar un lugar donde poner la tabla con HTML y algún modo para integrarle código CSS a la página que se va a mostrar, o almenos al elemento, y si esto no es posible, incluirlo en el CSS de todo el sitio. Es muy sencillo y estoy seguro que serás capaz de integrarlo. En cualquier caso, si tienes problemas, me puedes contactar sin ningún problema.

Demostración: Así se verá tu tabla

Te lo muestro usando el mismo código que te comparto y explico, así como capturas de pantalla para que veas su vista en móvil y escritorio.

Ejemplo de tabla responsive hecha con código

Captura de pantalla de su vista en Móvil

Código HTML de la Tabla Responsive que se adaptará a móviles

<table class=“responsive-table”>

<thead>
<tr>
     <th>Tipo</th>
     <th>Precio</th>
     <th>Medidas</th>
     <th>Metros</th>
     <th>Metros</th>
</tr>
</thead>

<tbody>
<tr>
     <td data-label=“Tipo”><strong>S</strong></td>
     <td data-label=“Precio”>40€</td>
     <td data-label=“Medidas”>1,50 X 1,50 M</td>
     <td data-label=“Metros”>2,25</td>
     <td data-label=“Metros”>5,70</td>
</tr>

<tr>
     <td data-label=“Tipo”><strong>S</strong></td>
     <td data-label=“Precio”>40€</td>
     <td data-label=“Medidas”>1,50 X 1,50 M</td>
     <td data-label=“Metros”>2,25</td>
     <td data-label=“Metros”>5,70</td>
</tr>

<tr>
     <td data-label=“Tipo”><strong>S</strong></td>
     <td data-label=“Precio”>40€</td>
     <td data-label=“Medidas”>1,50 X 1,50 M</td>
     <td data-label=“Metros”>2,25</td>
     <td data-label=“Metros”>5,70</td>
</tr>

<!– Resto de las filas –>
</tbody>

</table>

Explicación del código HTML de la Tabla Responsiva

Este código tiene diversas partes, las cuales te voy a explicar a continuación:

• <table> con una clase, la cual la asociará al código CSS.
• Dentro de <thead> Se incluyen todos los encabezados de la tabla. Necesita dentro tan solo un <tr>, que sirve para indicar que ahí va una fila, y varios <th>, cada uno de los cuales son los encabezados de la tabla.
• <tbody> Es el cuerpo de la tabla, asociado a los encabezados anteriores. Tiene dentro diferentes elementos.
  • <tr> (igual a lo explicado en thead, cada fila), y dentro de cada tr tenemos:
    • <td>, cada columna en esa fila, que irá asociada a cada encabezado en su mismo orden. Dentro de cada dato hay un data-label=”…”, es la etiqueta que mostrará en ese dato cuando la tabla se adapte al teléfono.

Código CSS que convertirán la Tabla anterior a amigable con los teléfonos

Bastará con copiar el código, pero yo te lo explico aquí abajo, por si tienes ganas de aprender cómo funciona y volverte mejor desarrollador.

.responsive-table {
      width: 100%;
      overflow-x: auto;
}

.responsive-table th, .responsive-table td {
      padding: 8px;
      text-align: left;
      border-top: 1px solid #ddd;
}

.responsive-table th {
      background-color: #ffedd7;
}

.responsive-table tbody tr:nth-child(even) {
      background-color: #ffedd7;

}

 

@media (max-width: 767px) {
.responsive-table thead {
      display: none; /* Oculta los encabezados en dispositivos móviles */
}

.responsive-table tr {
      margin-bottom: 0.625em;
      display: block;
      border-bottom: 2px solid #ddd;
}

.responsive-table td {
     display: block;
     text-align: right;
     position: relative;
     padding-left: 50%;
}

.responsive-table td::before {
     content: attr(data-label);
     position: absolute;
     left: 0;
     width: 50%;
     padding-left: 15px;
     font-weight: bold;
     text-align: left;
}
}

Explicación del código CSS

Media Query

Se refiere a la parte que pone:

@media (max-width: 767px) { … }

Las Media Queries son una técnica en CSS que permite aplicar estilos solo cuando ciertas condiciones son verdaderas. En este caso, el estilo dentro de esta Media Query solo se aplicará si el ancho de la pantalla es de 767 píxeles o menos, lo que es típico para pantallas de teléfonos móviles.

Ocultar encabezados en el teléfono

Se refiere a esta parte:

.responsive-table thead { display: none; /* Ocultar encabezados */ }

Lo que hace es ocultar encabezados en teléfono para mostrar los data-label del HTML.

Modificando la forma de mostrar filas en móvil

Explicamos la parte:

.responsive-table tr { margin-bottom: 0.625rem; display: block; justify-content: center; }

Aquí, estamos cambiando la forma en que se muestran las filas (tr) de la tabla (en el teléfono, recordemos que está dentro del media query).
En lugar de mostrarse como filas, ahora se mostrarán como bloques individuales, uno debajo del otro, con un pequeño margen entre ellos.

Modificando la forma de mostrar columnas en el móvil

Explico las partes en concreto:

.responsive-table td: Hace que las celdas se muestren como bloques, alinea el texto a la derecha y posiciona la celda de manera relativa para permitir posicionamiento absoluto de contenido generado.

.responsive-table td::before: Este pseudo-elemento genera contenido basado en el valor del atributo data-label de la celda. Se posiciona absolutamente dentro de la celda y se muestra a la izquierda, actuando como una etiqueta para el contenido de la celda en dispositivos móviles.

Etiquetas en las celdas (móvil)

La importante parte que incluye:

.responsive-table td:before { position: absolute; top: 0; left: 0; width: 45%; padding-right: 10px; white-space: nowrap; content: attr(data-label); }

Este fragmento crea etiquetas para las celdas usando el atributo data-label de las celdas (td) en el teléfono. Estas etiquetas se mostrarán a la izquierda del contenido de la celda en pantallas pequeñas, lo que ayuda a entender qué representa cada dato en la tabla.

El resto de partes son elementos decorativos.