Las tablas HTML son una de las mejores formas de representar información estructurada en filas y columnas. El problema aparece cuando contienen muchos datos y deben visualizarse en una pantalla pequeña.
En escritorio podemos disponer de espacio suficiente para mostrar varias columnas, pero en un móvil esa misma tabla puede desbordar la pantalla, comprimir excesivamente el contenido o resultar difícil de utilizar.
Con una estructura HTML adecuada y unas pocas reglas CSS podemos crear tablas responsive que sigan siendo legibles y accesibles en diferentes tamaños de pantalla, sin añadir JavaScript cuando no es necesario.
Partir de una tabla HTML correctamente estructurada
Antes de pensar en responsive, debemos asegurarnos de que la tabla está bien construida.
Por ejemplo:
<table class="tabla-precios">
<caption>Planes de mantenimiento web</caption>
<thead>
<tr>
<th scope="col">Plan</th>
<th scope="col">Actualizaciones</th>
<th scope="col">Backup</th>
<th scope="col">Monitorización</th>
<th scope="col">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Básico</th>
<td>Mensual</td>
<td>Semanal</td>
<td>No</td>
<td>50 €</td>
</tr>
<tr>
<th scope="row">Profesional</th>
<td>Semanal</td>
<td>Diario</td>
<td>Sí</td>
<td>90 €</td>
</tr>
</tbody>
</table>
Elementos como <thead>, <tbody> y <th> no sirven únicamente para aplicar estilos. También ayudan a expresar correctamente la relación entre los datos.
El atributo scope="col" indica que una celda actúa como encabezado de una columna, mientras que scope="row" identifica el encabezado de una fila.
También podemos utilizar <caption> para describir brevemente qué información contiene la tabla.
Una estructura semántica correcta resulta especialmente importante para los usuarios que acceden al contenido mediante tecnologías de asistencia.
La solución más sencilla: scroll horizontal
Para muchas tablas, la primera solución que deberíamos valorar es permitir desplazamiento horizontal cuando el contenido supera el ancho disponible.
Podemos envolver la tabla en un contenedor:
<div class="tabla-responsive">
<table>
...
</table>
</div>
Y aplicar:
.tabla-responsive {
width: 100%;
overflow-x: auto;
}
La tabla puede conservar su ancho natural mientras el contenedor evita que desborde el resto de la página.
También podemos definir un ancho mínimo:
.tabla-responsive table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
}
El min-width es opcional. Resulta útil cuando sabemos que, por debajo de cierto tamaño, comprimir todas las columnas empeoraría considerablemente la legibilidad.
En una pantalla grande veremos la tabla completa. Cuando no exista espacio suficiente, el usuario podrá desplazarse horizontalmente para consultar las columnas restantes.
La principal ventaja de esta solución es que no alteramos la estructura de los datos. La tabla continúa comportándose como una tabla.
Evitar comprimir demasiado las columnas
Un error frecuente consiste en intentar que todas las columnas entren obligatoriamente en el ancho de un móvil.
Si tenemos ocho columnas en una pantalla estrecha podemos conseguir técnicamente que todas entren, pero probablemente los textos acabarán divididos en múltiples líneas y será difícil interpretar la información.
Responsive no significa que todo tenga que mostrarse simultáneamente.
En muchos casos, permitir desplazamiento horizontal ofrece una experiencia mucho más clara que comprimir una tabla hasta hacerla prácticamente ilegible.
Cuando el tipo de datos lo permita, también podemos evitar determinados saltos de línea:
.tabla-responsive th,
.tabla-responsive td {
white-space: nowrap;
}
No conviene aplicarlo automáticamente a todas las columnas. Si una celda contiene textos largos, puede ser preferible permitir que se ajusten a varias líneas.
La decisión debe depender del contenido real de la tabla.
Ejemplo completo de tabla responsive con CSS
Una implementación sencilla podría quedar así:
.tabla-responsive {
width: 100%;
overflow-x: auto;
}
.tabla-responsive table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
}
.tabla-responsive th,
.tabla-responsive td {
padding: 12px 16px;
border: 1px solid #ddd;
text-align: left;
}
.tabla-responsive th {
font-weight: 600;
}
Para este comportamiento no necesitamos JavaScript. El navegador gestiona el desplazamiento y la estructura HTML permanece intacta.
Tablas responsive con Bootstrap
Si nuestro proyecto utiliza Bootstrap, tampoco necesitamos programar este comportamiento manualmente.
Bootstrap permite envolver una tabla con:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Cuando el ancho de la tabla supera el espacio disponible, el contenedor permite desplazamiento horizontal.
También podemos utilizar variantes específicas según breakpoint:
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
En este caso, el comportamiento responsive se aplica según el breakpoint indicado.
Es una solución sencilla cuando Bootstrap ya forma parte del proyecto y evita añadir código específico para resolver un problema que el framework ya contempla.
¿Podemos convertir las filas en tarjetas en móvil?
Existe otra estrategia: transformar visualmente cada fila en una especie de tarjeta cuando la pantalla es pequeña.
Puede resultar adecuada cuando cada fila representa una entidad independiente.
Por ejemplo, una tabla como esta:
| Cliente | Plan | Estado |
|---|---|---|
| Empresa A | Profesional | Activo |
| Empresa B | Básico | Pendiente |
podría representarse en una pantalla pequeña de esta forma:
Empresa A
Plan: Profesional
Estado: Activo
Empresa B
Plan: Básico
Estado: Pendiente
Esta presentación puede resultar más cómoda en móvil porque elimina el desplazamiento horizontal.
Sin embargo, no es adecuada para todas las tablas.
Si el usuario necesita comparar rápidamente cifras entre diferentes filas o columnas —por ejemplo precios, métricas financieras o características técnicas— transformar cada fila en una tarjeta puede dificultar la comparación.
La estrategia responsive debe elegirse según el tipo de información, no únicamente según el tamaño de pantalla.
Ejemplo de tabla en formato tarjeta
Para tablas relativamente sencillas podemos utilizar atributos data-label:
<tr>
<td data-label="Cliente">Empresa A</td>
<td data-label="Plan">Profesional</td>
<td data-label="Estado">Activo</td>
</tr>
Y modificar la presentación únicamente en pantallas pequeñas:
@media (max-width: 600px) {
.tabla-tarjetas thead {
display: none;
}
.tabla-tarjetas tr {
display: block;
margin-bottom: 1rem;
border: 1px solid #ddd;
}
.tabla-tarjetas td {
display: grid;
grid-template-columns: 120px 1fr;
gap: 1rem;
padding: 10px;
}
.tabla-tarjetas td::before {
content: attr(data-label);
font-weight: 600;
}
}
Esta técnica permite cambiar la presentación sin duplicar manualmente todo el contenido.
Aun así, conviene comprobar el resultado con diferentes navegadores y tecnologías de asistencia. Para tablas complejas, conservar la estructura tradicional y permitir scroll horizontal suele ser una opción más sencilla y predecible.
No necesitamos detectar si el usuario utiliza un móvil
Para adaptar una tabla al espacio disponible tampoco necesitamos ejecutar JavaScript para averiguar si el visitante utiliza un teléfono.
Podemos utilizar directamente una media query:
@media (max-width: 600px) {
...
}
De esta forma reaccionamos al espacio disponible, que es lo que realmente determina si la tabla necesita otra presentación.
Un portátil puede tener una ventana muy estrecha y una tablet puede disponer de bastante espacio horizontal según su orientación.
Si necesitas profundizar en esta diferencia, en nuestra guía sobre cómo detectar dispositivos móviles con JavaScript explicamos por qué es preferible detectar características y capacidades en lugar de depender únicamente del tipo de dispositivo.
Accesibilidad en las tablas responsive
Una tabla no debería ser únicamente visualmente responsive. También debemos conservar correctamente la relación entre encabezados y datos.
Siempre que corresponda, conviene utilizar <th> para identificar encabezados y distinguir entre encabezados de fila y columna mediante scope.
El elemento <caption> permite además explicar brevemente el contenido de la tabla:
<table>
<caption>Comparativa de planes de servicio</caption>
...
</table>
También debemos evitar utilizar tablas HTML simplemente para distribuir visualmente los elementos de una página.
Las tablas están destinadas a datos tabulares, es decir, información cuya relación entre filas y columnas tiene significado. Para crear columnas, tarjetas o estructuras de diseño existen herramientas más adecuadas como CSS Grid y Flexbox.
¿Qué solución responsive debemos elegir?
No existe una técnica única que sea la mejor en todos los casos.
Para una tabla con muchas columnas y datos que deben compararse, normalmente empezaría por scroll horizontal. Es sencillo, conserva la estructura original y evita comprimir excesivamente la información.
Para una tabla sencilla donde cada fila funciona como una ficha independiente, podemos valorar una presentación vertical tipo tarjeta en pantallas pequeñas.
Si el proyecto ya utiliza Bootstrap, .table-responsive resuelve directamente el primer escenario.
Lo importante es no transformar una tabla simplemente porque una solución parezca más sofisticada. La opción correcta es aquella que permite entender y comparar los datos con el menor esfuerzo posible.
Tablas responsive sin complicar el desarrollo
Una tabla responsive no tiene que cambiar completamente de estructura cuando se visualiza desde un móvil.
En muchos casos basta con conservar una estructura HTML correcta, permitir desplazamiento horizontal cuando el espacio es insuficiente y prestar atención a la legibilidad de las columnas.
Cuando la naturaleza de los datos lo permite, podemos optar por una presentación vertical adaptada a pantallas pequeñas.
La clave está en elegir la solución según cómo necesita consultar y comparar la información el usuario, no según el dispositivo que creemos que está utilizando.
En ENDEOS desarrollamos y mantenemos soluciones web para empresas, adaptando interfaces y funcionalidades para que puedan utilizarse correctamente en diferentes dispositivos y tamaños de pantalla.