Merida Design Blog

Publicado el | Tutoriales / , ,

Como crear tablas responsivas con CSS

Las tablas son uno de los elementos web que suelen dar problemas a la hora de diseñar una página web responsiva, ya sea desde el punto de vista de diseño como también desde la parte técnica.

En este tutorial, te explicaré una forma de crear tablas responsivas, pasando de una tabla en pantallas grandes (escritorio) a elementos estilo tarjeta en pantallas pequeñas (móviles) cambiando solamente los estilos CSS.

Ver Ejemplo en Codepen.io


El HTML

...
<body>
    <div class="table-users">
        <div class="header">Users</div>

        <table cellspacing="0">
            <tr>
                <th>Foto</th>
                <th>Nombre</th>
                <th>Correo</th>
                <th>Teléfono</th>
                <th width="230">Comentarios</th>
            </tr>

            <tr>
                <td><img src="http://lorempixel.com/100/100/people/1" alt="" /></td>
                <td>Jane Doe</td>
                <td>[email protected]</td>
                <td>01 800 2000</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </td>
            </tr>

            <tr>
                <td><img src="http://lorempixel.com/100/100/sports/2" alt="" /></td>
                <td>John Doe</td>
                <td>[email protected]</td>
                <td>01 800 2000</td>
                <td>Blanditiis, aliquid numquam iure voluptatibus ut maiores explicabo ducimus neque, nesciunt rerum perferendis, inventore.</td>
            </tr>
        </table>
    </div>
</body>

El código HMTL como puedes ver, es una estructura de tabla normal con contenido de ejemplo, mediante los estilos y usando media queries cambiaremos por completo el estilo de la tabla por uno que nos permita visualizar el contenido en un formato adecuado.


Estilo general

image-1-1

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.header {
    background-color: #ccc;
    color: white;
    font-size: 1.5em;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
}

img {
    border-radius: 50%;
    height: 60px;
    width: 60px;
}

.table-users {
    border: 1px solid #ccc;
    max-width: calc(100% - 2em);
    margin: 1em auto;
    width: 800px;
}

table { width: 100%; }

td, th { padding: 10px; }

td {
    text-align: center;
    vertical-align: middle;
}
td:last-child {
    font-size: 0.95em;
    line-height: 1.4;
    text-align: left;
}

th { background-color: #efefef; }

tr:nth-child(2n) { background-color: white; }
tr:nth-child(2n+1) { background-color: #fafafa; }

Estos estilos se aplicarán a la tabla por defecto y será la apariencia que tenga cuando sea visualizada desde pantallas grandes.


Estilo medio

image-2-1

@media screen and (max-width: 700px) {
    table, tr, td {
        display: block;
    }
    
    tr:first-child { display: none; }
    
    td:first-child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100px;
    }
    tr { 
        padding: 10px 0; 
        position: relative; 
    }

    td:not(:first-child) {
        clear: both;
        margin-left: 100px;
        padding: 4px 20px 4px 100px;
        position: relative;
        text-align: left;
    }
    
    td:not(:first-child):before {
        color: #bbb;
        content: '';
        display: block;
        left: 0;
        position: absolute;
    }
    td:nth-child(2):before { content: 'Nombre:'; }
    td:nth-child(3):before { content: 'Correo:'; }
    td:nth-child(4):before { content: 'Teléfono:'; }
    td:nth-child(5):before { content: 'Comentarios:'; }
}

Cuando el contenido ya no puede verse correctamente en la pantalla, aplicamos un @media query para ese punto, que en el caso de este ejemplo es a los 700px de ancho.

Lo mas importante en estos estilos, es que convertimos los elementos de la tabla en bloques para manipularlos mas fácilmente y cambiamos la alineación de los elementos, colocando ahora cada columna en una fila para que tenga suficiente espacio para el contenido.

La fila con los títulos la ocultamos y ahora mostramos los títulos de los campos a través de la pseudo-clase :before.


Estilo móviles

image-3

@media screen and (max-width: 500px) {
    .header {
        background-color: transparent;
        color: #888;
        font-size: 2em;
        font-weight: 700;
        padding: 0;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
    }
    
    img {
        height: 100px;
        margin: 0.5rem 0;
        width: 100px;
    }
    
    td:first-child,
    td:not(:first-child) {
        padding: 5px 1em;
        width: 100%;
    }
    
    td:first-child {
        background-color: #efefef;
        border-bottom: 1px solid #ddd;
        position: relative;
        top: 0;
        transform: translateY(0);
    }
    
    td:not(:first-child) { 
        margin: 0; 
    }
    td:not(:first-child):before {
        display: block;
        font-size: .8em;
        padding-top: 0.3em;
        position: relative;
    }
    
    td:last-child { padding-bottom: 1rem; }
    
    tr {
        background-color: white !important;
        border: 1px solid #ccc;
        margin: 0.5rem 0;
        padding: 0;
    }
    
    .table-users {
        border: none;
        box-shadow: none;
    }
}

Para las pantallas mas pequeñas, colocar cada elemento de manera separada en formato de tarjetas, le permite al usuario ver la información completa y navegar de manera natural haciendo scroll o swipe down.

En los estilos lo que hacemos es forzar a que cada campo (que anteriormente fuera una columna) ocupe una linea completa y los títulos, los colocamos en la parte superior de cada fila como etiquetas.


El resultado de este código lo puedes consultar en plnkr.co, o también ver un ejemplo con un poco mas de estilos en codepen.io.


Conclusión

La parte mas importante para modificar los estilos de tus tablas es cambiar el comportamiento por defecto asignándole estilos de bloque (display: block), una vez hecho eso, podrás cambiar libremente la estructura.

Mi recomendación para asignar los @media queries, es que los apliques conforme el contenido lo necesite y no en base a tamaños de pantalla específicos, de esa forma, sin importar la variedad de dispositivos y tamaños de pantalla desde la cual se consulte la tabla, ésta siempre se mostrará correctamente aprovechando el espacio disponible.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: