Taules "responsive" amb CSS

Les taules són un patró de disseny per mostrar grans quantitats de dades en files i columnes, cosa que les converteix una forma molt visual i eficient de mostrar dades. Des del principi, la web admet la visualització de dades en format tabular. Les taules HTML presenten dades tabulars de manera semàntica i estructuralment apropiada. No obstant això, els estils per defecte a les taules HTML no són idonis per a la visualització en dispositius mòbils.

Com a exemple us mostro aquesta taula de columnes amb els següents estils:

En dispositius mòbils, on l'amplada disponible és molt menor, la visualització de les dades de la taula implica la reducció de la mida de la font. En els casos en què la taula contingui una quantitat de columnes significativa, la lectura de les dades es fa considerablement difícil. Evidentment, podem recórrer a realitzar un zoom a la pròpia pantalla, però aquesta no hauria de ser la solució.

Solució 1: Aplicar Scroll Horitzontal

Una de les opcions és aplicar un scroll horitzontal que sigui visible en aquells casos en què l'amplada disponible sigui inferior a l'amplada total de la taula:

Solució 2: Afegir estils per convertir la taula en responsive

Per a aconseguir estils que presentin els camps de cada registre de la taula en forma vertical i amb el 100% de l'amplada disponible cal afegir el següent atribut "data-cell" (el nom pot ser similar) a tots els camps de cada fila de la taula. Aquest atribut ha de contenir el nom del camp a què pertany la dada. El codi següent és un exemple per a un dels registres de la taula:

El pseudo-element de Css "before" ens permet accedir als atributs de cada element de la taula. Aprofitant, doncs, que hem inclòs l'atribut "data-cell" amb el nom del camp a cada registre, podem afegir estils als elements de la taula per visualitzar-los en mòbils:

Amb això el resultat de la visualització de la taula per a mòbils és el següent:

Maquetació de taules de dades "responsive" únicament amb Css. Utilització del pseudo-element: "before"