Taules "responsive" amb CSS

Les taules són un patró de disseny per mostrar grans quantitats de dades a files i columnes, el 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 d'una manera semàntica i estructuralment apropiada. No obstant això, els estils predeterminats 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:

.container{
  padding: 4em;
  margin: 0 auto;
  width: 100%;
  max-width: 60rem;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  font-size: 1.6rem;
} 

td, th {
  border: 1px solid #9a9a9a;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

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ón 1: Aplicar Scroll Horizontal

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

.container{
    overflow-x: auto;
}

/* Customize Scroll */
/* Width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(100, 100, 100);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(80, 80, 80);
}

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

Per 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-hi 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 la que 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 a els elements de la taula per a la visualització en mòbils:

@media(max-with: 650px) {
  .container {
    padding: 2em;
  }
  th{
    display: none;
  }
  td{
    display: block;
  }
    td::before {
        content: attr(data-cell) ": ";
        font-weight: 700;
        text-transform: capitalize;
    }
}

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"