Cómo crear una tabla responsive con CSS

Las tablas de HTML para mostrar información son (y serán probablemente siempre) una de las partes más importantes de un documento HTML para visualizar cualquier tipo de información. Para algunos usuarios, no es solo la información en la tabla lo que importa sino tambien en la manera y la facilidad que tiene al leerla e interpretarla.

Si ya has intentado hacer una tabla responsive que funcione con diseño responsive, debes saber lo complicado e incómodo que es hacerlo, por lo tanto en este artículo aprenderás como hacer una tabla responsive usando CSS plano o incluso una util implementación con Javascript en caso de que puedas usarlo.

Creando una tabla responsive con CSS

Con el fin de crear una tabla responsive, necesitamos enfocarnos no solo en la tabla si no en el elemento div que contendrá nuestra tabla. En este caso vamos a usar media queries para modificar una clase (.table-responsive) de acuerdo a las dimensiones de la pantalla. El elemento que tenga la clase .table-responsive necesitará tener como valor auto la propiedad overflow en el eje x. Al usar media queries, le daremos un valor de anchura de 100% para hacerlo responsive.

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .table-responsive > .table {
        margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
    }
}

Luego solo necesitarás envolver tu tabla en un elemento div con la clase table-responsive, independientemente del tamaño como se muestra en el siguiente ejemplo:

<!-- No olvides envolver la tabla dentro de un elemento div con la clase table-responsive -->
<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Campo 1</th>
                <th>Campo 2</th>
                <th>Campo 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Valor 1</td>
                <td>Valor 2</td>
                <td>Valor 3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Valor 1</td>
                <td>Valor 2</td>
                <td>Valor 3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Valor 1</td>
                <td>Valor 2</td>
                <td>Valor 3</td>
            </tr>
        </tbody>
    </table>
</div>

Sin embargo, debes saber que la anchura de la tabla (en las pantallas donde la clase responsive no se necesita) estará definido de acuerdo a la cantidad de información en la tabla, así que si tu tabla es pequeña, puedes darle un efecto "más responsive" a tu tabla colocando un valor de anchura de 100% a la tabla con css:

<div class="table-responsive">
    <table style="width:100%;">
        <!-- Contenido -->
    </table>
</div>

O creando una clase con nombre table para hacer la propiedad más obvia y usarla en diferentes tablas:

<style>
    /*ó en un archivo de CSS externo */
    .table{
        width:100%;
    }
</style>
<div class="table-responsive">
    <table class="table">
        <!-- Contenido -->
    </table>
</div>

Creando una tabla responsive con CSS y Javascript

Si quieres no solamente mostrar una tabla responsive sino además funcional, si puedes usar Javascript para lograrlo, te ofrecemos una solución bastante interesante. Estamos hablando de responsive-tables.js, esta sencilla combinación de JS y CSS te permite adaptar tus tablas para que se adapten a dispositivos más pequeños.

Cómo funciona

Si analizas el diseño de algunas tablas, te darás cuenta que la mayoría de las veces, la primera columna es la que contiene la descripción clave de la tabla. Esta sirve de referencia para poder leer la tabla correctamente, mientras que otras tienen las descripciones horizontalmente. Con esto en mente, este plugin hace nuestra tabla responsive y dejando la primera columna fija y visible siempre.

Para comenzar, incluye los archivos de Javascript y CSS en tu documento HTML (visita la página de inicio del plugin or o el repositorio oficial de Github):

<!-- Agregar estilo -->
<link href="responsive-tables.css" type="text/css" media="screen" rel="stylesheet"/>
<!-- Agregar el plugin JS -->
<script type="text/javascript" src="responsive-tables.js"></script>

Luego, a diferencia de nuestro primer ejemplo que solo usa CSS, para hacer una tabla responsive con este plugin solamente necesitarás agregar la clase responsive a la tabla:

<table class="responsive">
    <!-- Información -->
</table>

La inicialización de Javascript se ejecutará automaticamente en todas las tablas con clase responsive al agregar el plugin, desde ahora las tablas se modificarán en el lado del cliente cuando la ventana es más pequeña que el tamaño de la tabla.

Otros tips que puedes usar

Oculta información irrelevante

Si tienes una tabla con un monton de información y te gustaría simplemente hacerla legible en un dispositivo con pantalla pequeña, hay otras soluciones que puedes implementar, por ejemplo ocultando alguno de los campos de la tabla que son completamente irrelevantes simplemente al añadir una clase que hace que se oculten en dispositivos de baja resolución:

/* Este media query ocultará los elementos que tengan la clase hide-on-mobile con una resolución menor o igual a 320px*/
@media screen and (max-width: 320px) {
    .hide-on-mobile {
         display: none; 
     }
}

La clase hide-on-mobile va a ocultar todos los elementos que tengan esa clase en dispositivos con una resolución menor a 320px. Así que nuestra tabla ahora lucirá:

<!-- No olvides envolver la tabla dentro de un elemento div con la clase table-responsive -->
<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th class="hide-on-mobile">#</th>
                <th>Campo 1</th>
                <th>Campo 2</th>
                <th>Campo 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hide-on-mobile">1</td>
                <td>Campo 1</td>
                <td>Campo 2</td>
                <td>Campo 3</td>
            </tr>
            <tr>
                <td class="hide-on-mobile">2</td>
                <td>Campo 1</td>
                <td>Campo 2</td>
                <td>Campo 3</td>
            </tr>
            <tr>
                <td class="hide-on-mobile">3</td>
                <td>Campo 1</td>
                <td>Campo 2</td>
                <td>Campo 3</td>
            </tr>
        </tbody>
    </table>
</div>

Muestra gráficas en vez de tablas

Si quieres proporcionar una experiencia de usuario agradable, deberías considerar en convertir esas largas tabla en dispositivos móviles en gráficas. Casi todos los plugins de gráficas funcionan en dispositivos móbiles y pantallas pequeñas proporcionando soporte responsive.

Para ello puedes usar plugins conocidos como HighchartTablePlugin ó Chartinator.

Que te diviertas !