Tablas "responsive" con CSS

Las tablas son un patrón de diseño para mostrar grandes cantidades de datos en hilos y columnas, lo que les convierte una forma muy visual y eficiente de mostrar datos. Desde el principio, la web admite la visualización de datos en formato tabular. Los tablas HTML presentan datos tabulares de una manera semántica y estructuralmente apropiada. Sin embargo, los estilos predeterminados en las tablas HTML no son idóneos para la visualización en dispositivos móviles.

Como ejemplo os muestro esta tabla de columnas con los siguientes estilos:

  .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 dispositivos móviles, donde la anchura disponible es mucho menor, la visualización de los datos de la tabla implica la reducción del tamaño de la fuente. En los casos en que la tabla contenga una cantidad de columnas significativa la lectura de los datos se hace considerablemente difícil. Evidentemente, podemos recurrir a realizar un "zoom" en la propia pantalla, pero ésta no debería ser la solución.

Solución 1: Aplicar Scroll Horizontal

Una de las opciones es aplicar un scroll horizontal que sea visible en aquellos casos en los que la anchura disponible sea inferior a la anchura total de la tabla:

  .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ón 2: Añadir estilos para convertir la tabla en responsive

Para conseguir estilos que presenten los campos de cada registro de la tabla en forma vertical y con el 100% de la anchura disponible hay que añadir siguiente atributo "data-cell"(el nombre puede ser similar) en todos los campos de cada fila de la mesa. Este atributo debe contener el nombre del campo en la que pertenece el dato. El siguiente código es un ejemplo para uno de los registros de la tabla:

El pseudo-elemento de Css "before" nos permite acceder a los atributos de cada elemento de la mesa. Aprovechando, pues, que hemos incluido el atributo "data-cell" con el nombre del campo en cada registro, podemos añadir estilos a los elementos de la tabla para la visualización en móviles:

  @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;
      }
  }
  

Con ello el resultado de la visualización de la mesa para móviles es el siguiente:

Maquetación de tablas de datos "responsive" únicamente con Css. Utilización del pseudo-elemento: "before"