Código en la Red

3 soluciones para adaptar las tablas a todos los dispositivos con CSS

Descubre 3 soluciones para conseguir que las tablas de tu sitio web se adapten correctamente a todos los dispositivos. Tabla responsive.

22/04/2022

El elemento <table> de HTML es un poco rebelde a la hora de adaptarse a los dispositivos más pequeños.

Los profesionales de la maquetación o el diseño web lo sabemos y siempre estamos buscando soluciones para conseguir diseños adaptados a todos los dispositivos y es fácil encallarse cuando te topas con una tabla, sobre todo cuando esta tiene muchas columnas.

Hoy en día existen diversas soluciones para conseguir tablas con diseño adaptativo.

Quizá te has planteado el mero hecho de quitar el elemento <table> de tus diseños con HTML y CSS simplemente por este motivo de rebeldía.

Quizá no lo sabías pero las tablas fueron un elemento muy importante a la hora de diseñar páginas web.

Ya no solo por el simple hecho de mostrar una tabla con datos simples sino que por mucho tiempo fueron la estructura principal o cuerpo de la página web.

Hoy en día, esto es impensable y, doy gracias a dios, porque era bastante tedioso entender la lógica de una tabla en estructuras complejas.

Esto me hace viajar en el tiempo y recordar las peleas que llegué a tener en mis inicios cuando me topaba con tiendas online desarrolladas con Oscommerce.

Existiendo tantos elementos como los <div>, <section>, <nav>, etc, los elementos tipo <table> han quedado relegadas pero todavía siguen siendo útiles y en muchas páginas webs todavía te encontrarás tablas.

En este artículo vas a descubrir 3 formas de conseguir que una tabla se adapte a todos los dispositivos utilizando técnicas de CSS.

Estructura básica de la tabla

En el ejemplo en funcionamiento he creado una tabla con bastantes columnas.

A continuación puedes ver el código HTML de ejemplo:

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellidos</th>
            <th>Email</th>
            <th>Edad</th>
            <th>Nómina</th>
            <th>Ingresos</th>
            <th>Gastos</th>
            <th>Beneficios</th>
            <th>Impuestos</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>demo@demo.com</td>
            <td>56</td>
            <td>2.560€</td>
            <td>2.560€</td>
            <td>1.000€</td>
            <td>1.560€</td>
            <td>390</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>demo@demo.com</td>
            <td>56</td>
            <td>2.560€</td>
            <td>2.560€</td>
            <td>1.000€</td>
            <td>1.560€</td>
            <td>390</td>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>demo@demo.com</td>
            <td>56</td>
            <td>2.560€</td>
            <td>2.560€</td>
            <td>1.000€</td>
            <td>1.560€</td>
            <td>390</td>
        </tr>
    </tbody>
</table>

No deja de ser una tabla simple con 9 columnas y 3 filas para poder ver la ilustración sin necesidad de usar el scroll.

Estas 9 columnas nos harán ver que ocurre en dispositivos pequeños y que podemos hacer para remediarlo.

Estilos para la tabla

En la hoja de estilos CSS agrego algo de formato para la tabla:

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 800px;
    margin: 0px auto;
}
 
td, th {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;   
}
 
tr:nth-child(even) {
    background-color: #eee;
}
 
td:nth-child(n + 3),
th:nth-child(n + 3) {
    text-align: center;
}
 
tbody tr:hover {
    background-color: aquamarine;
}
 
thead {
    background-color: black;
    color: white;
}

Para conseguir como resultado algo como lo que sigue:

Tabla con muchas columnas

Solución 1: Tabla responsive escondiendo columnas

Una solución rápida para que esta tabla se adapte a todos los dispositivos es decidir que columnas esconder en dispositivos más pequeños para que la tabla no se salga fuera de órbita.

Esto es bastante personal. En este punto vas a tener que decidir que columnas son menos importantes para no mostrarlas en dispositivos más pequeños.

Desde mi punto de vista, las columnas menos importantes son: email, edad, impuestos, apellidos y nómina.

Según he podido observar con la consola del navegador, aplicando 2 puntos de corte o media queries ya he conseguido que la tabla se vea bien en todos los dispositivos.

@media screen and (max-width: 920px) {
    table {
        width: 100%;
    }
 
    /* Ocultar edad */
    table tr th:nth-child(4),
    table tr td:nth-child(4) {
        display: none;
    }
 
    /* Ocultar email */
    table tr th:nth-child(3),
    table tr td:nth-child(3) {
        display: none;
    }
 
    /* Ocultar impuestos */
    table tr th:nth-child(9),
    table tr td:nth-child(9) {
        display: none;
    }
}
 
@media screen and (max-width: 767px) {
    /* Ocultar apellidos */
    table tr th:nth-child(2),
    table tr td:nth-child(2) {
        display: none;
    }
 
    /* Ocultar nómina */
    table tr th:nth-child(5),
    table tr td:nth-child(5) {
        display: none;
    }
}

En pantallas menores a 920px he empezado a detectar problemas que he solucionado ocultando la edad, el email y el impuesto.

En pantallas más pequeñas a 767px, he necesitado ocultar 2 más, en este caso, apellidos y nómina dejan de ser visibles.

Ver demo Descargar

Para mi gusto no es la solución más adecuada ya que esto implica ofrecer menos información a los usuarios que utilizan dispositivos pequeños.

Solución 2: Tabla responsive con scroll horizontal

Otra solución más rápida todavía es aplicar a la tabla un scroll horizontal empleando para ello una capa padre.

De esta forma, la tabla se muestra al mismo tamaño original pero el usuario tiene que desplazar el dedo para visualizar el contenido oculto que hay a la derecha ya que la tabla no se muestra de forma completa.

Visualmente, en dispositivos pequeños el usuario ve una barra de scroll horizontal como la siguiente:

Tabla responsive con scroll horizontal

Esto se consigue aplicando una capa por encima de la tabla.

En el ejemplo en funcionamiento he agregado el contenedor con class=»table-responsive» de la siguiente manera:

<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Apellidos</th>
                <th>Email</th>
                <th>Edad</th>
                <th>Nómina</th>
                <th>Ingresos</th>
                <th>Gastos</th>
                <th>Beneficios</th>
                <th>Impuestos</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem</td>
                <td>Ipsum</td>
                <td>demo@demo.com</td>
                <td>56</td>
                <td>2.560€</td>
                <td>2.560€</td>
                <td>1.000€</td>
                <td>1.560€</td>
                <td>390</td>
            </tr>
            <tr>
                <td>Lorem</td>
                <td>Ipsum</td>
                <td>demo@demo.com</td>
                <td>56</td>
                <td>2.560€</td>
                <td>2.560€</td>
                <td>1.000€</td>
                <td>1.560€</td>
                <td>390</td>
            </tr>
            <tr>
                <td>Lorem</td>
                <td>Ipsum</td>
                <td>demo@demo.com</td>
                <td>56</td>
                <td>2.560€</td>
                <td>2.560€</td>
                <td>1.000€</td>
                <td>1.560€</td>
                <td>390</td>
            </tr>
        </tbody>
    </table>
</div>

En la hoja de estilos CSS puedes agregar lo siguiente:

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

La clave está en el overflow-x que establezco en automático para que el scroll horizontal aparezca si los datos que hay dentro ya no caben en el contenedor.

Ver demo Descargar

A pesar de ofrecerte esta solución que no parece del todo mala, debo decirte que no me acaba de convencer.  Me da la sensación de que no es del todo usable. Me gustaría ponérselo más fácil al usuario aunque me cueste más trabajo.

Solución 3: Tabla responsive convertida a contenedores en dispositivos pequeños

Conseguir esta solución requiere más tiempo pero me parece la más adecuada de todas ya que, en todas las resoluciones, la tabla se muestra de forma correcta y completa.

Esta solución consiste en disponer de la tabla original en pantallas de escritorio y para dispositivos más pequeños disponer de un contenedor para mostrar los datos de la tabla en 2 columnas: cabecera y datos.

En la estructura HTML, después del código de tu <table>, puedes agregar la estructura de la tabla usando contenedores.

<div class="table">
    <div class="item">
        <div class="row">
            <div class="thead">Nombre</div>
            <div class="tbody">Lorem</div>
        </div>
        <div class="row">
            <div class="thead">Apellidos</div>
            <div class="tbody">Ipsum</div>
        </div>
        <div class="row">
            <div class="thead">Email</div>
            <div class="tbody">demo@demo.com</div>
        </div>
        <div class="row">
            <div class="thead">Edad</div>
            <div class="tbody">56</div>
        </div>
        <div class="row">
            <div class="thead">Nómina</div>
            <div class="tbody">2.560€</div>
        </div>
        <div class="row">
            <div class="thead">Ingresos</div>
            <div class="tbody">2.560€</div>
        </div>
        <div class="row">
            <div class="thead">Gastos</div>
            <div class="tbody">1.000€</div>
        </div>
        <div class="row">
            <div class="thead">Beneficios</div>
            <div class="tbody">1.560€</div>
        </div>
        <div class="row">
            <div class="thead">Impuestos</div>
            <div class="tbody">390</div>
        </div>
    </div>
    <div class="item">
        <div class="row">
            <div class="thead">Nombre</div>
            <div class="tbody">Lorem</div>
        </div>
        <div class="row">
            <div class="thead">Apellidos</div>
            <div class="tbody">Ipsum</div>
        </div>
        <div class="row">
            <div class="thead">Email</div>
            <div class="tbody">demo@demo.com</div>
        </div>
        <div class="row">
            <div class="thead">Edad</div>
            <div class="tbody">56</div>
        </div>
        <div class="row">
            <div class="thead">Nómina</div>
            <div class="tbody">2.560€</div>
        </div>
        <div class="row">
            <div class="thead">Ingresos</div>
            <div class="tbody">2.560€</div>
        </div>
        <div class="row">
            <div class="thead">Gastos</div>
            <div class="tbody">1.000€</div>
        </div>
        <div class="row">
            <div class="thead">Beneficios</div>
            <div class="tbody">1.560€</div>
        </div>
        <div class="row">
            <div class="thead">Impuestos</div>
            <div class="tbody">390</div>
        </div>
    </

            
0 comentarios

    
    
    

                    
            

    

        

            

                
Añadir comentario
Navegación
Etiquetas
accordeones actualizaciones prestashop alertas archivos arrays audio autocomplete backgrounds bootstrap bordes botones buscadores cabe cadenas calculadoras calendario captchas carousel chats checkboxes clases colores comentarios contenedores correo masivo countdown Crear un tema WordPress desde cero date datepickers dialogs directorios e-learning editores editores html emails eventos excel extensiones facebook fade fancybox fancyzoom fechas flexbox fondos formas de pago formularios framework fuentes funciones galerias gest google graficas idiomas imágenes inputs Interfaz gráfica ip jquery json keyup lightbox links listas loading localStorage logos mapas márgenes marketplace menús Migración módulos prestashop Mootools mp3 notificaciones números onblur onchange onclick onfocus onsubmit Optimizadores de páginas Web ordenación paddings paginación password paypal plugins wordpress popups pres programas progress bar punteros radiobutton ratings Redes sociales redimensionamiento reg registros relojes res rlightbox scroll seguridad selects shadowbox sliders sortable stripe tablas tabs templates textarea textos themes tooltips toplinks traducciones transparencia uploads validaciones videos word youtube zoom

© 2026 . All rights reserved.

Desarrollador con amor por Komodo Website