Alternativa para hacer una tabla responsive

Este tutorial muestra una alternativa para hacer una tabla responsive con HTML y CSS.
Para mostrar un ejemplo vamos a implementar este diseño sobre la página precios.html
de invie que construimos en el excelente curso de Responsive and Design.

https://github.com/platzi/invie-responsive/blob/master/precios.html

Los pasos son:

1. Crear una clase para el estilo de la tabla. Por ejemplo class=‘tablaPrecios’ y adicionar el caption

`<div class="contenedor">
        <table **class="tablaPrecios"** >
        <caption> <h2>**Precios**</h2></caption>
          <thead>
            <tr>
              <th>Modelo</th>
              <th>Precio</th>
              <th>Descripción</th>
              <th>Categoria</th>
              <th>Precio Promo</th>
              <th>Imagen</th>
            </tr>
          </thead>
          <tbody>
            <tr>

1. Garantizar que los nombres de las cabeceras de las columnas sean únicos, es decir, que no estén repetidos.
   Para este tutorial coloque estos nombres: Modelo, Precio, Descripción, Categorías, Precio Promo e imagen.

        <table class="tablaPrecios" >
        <caption> <h2>Precios</h2></caption>
          <thead>
            <tr>
              <th>Modelo</th>
              <th>Precio</th>
              <th>Descripción</th>
              <th>Categoria</th>
              <th>Precio Promo</th>
              <th>Imagen</th>
            </tr>
          </thead>
          <tbody>

1. Adicionar en cada ‘td’ el atributo data-label con su respectivo nombre de tal forma que corresponda con el nombre de la columna, es decir, de la siguiente manera;

 </thead>
          <tbody>
            <tr>
              <td data-label="Modelo" >Invie classic</td>
              <td data-label="Precio"  >$100000</td>
              <td data-label="Descripción"  >Una guitarra muy pro</td>
              <td data-label="Categoria"  >Invie classic</td>
              <td data-label="Precio Promo"  >$100000</td>
              <td data-label="Imagen" ><img  data-src="images/invie-acoustic-guitar.png"  alt="Guitarra" width="150" ></td>
            </tr>
             <tr>
              <td data-label="Modelo" >Invie classic</td>
              <td data-label="Precio"  >$100000</td>
              <td data-label="Descripción"  >Una guitarra muy pro</td>
              <td data-label="Categoria"  >Invie classic</td>
              <td data-label="Precio Promo"  >$100000</td>
              <td data-label="Imagen" ><img  data-src="images/invie-rock-guitar.png"  alt="Guitarra Invie Acustica" width="150" ></td>
            </tr>

1. Desaparecer el header de la tabla con estas propiedades dentro del media query

  <!-- Estilos tabla responsive precios-->
    <style>
     @media screen and (max-width: 800px) {
    
    /* Desaparecer el header */
      table.tablaPrecios thead, th {
         border: none;
         clip: rect(0, 0, 0, 0);
         height: 1px;
         margin: -1px;
         overflow: hidden;
         padding: 0;
         position: absolute;
         width: 1px;
      }```

5. Provocar que cada celda ocupe todo el ancho de la tabla:

  /* Cada celda ocupa todo el ancho 
   de la tabla */

   table.tablaPrecios tr{
     border-bottom: 3px solid; 
   }

   table.tablaPrecios td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 1.2em;
    text-align: right;
    padding: 10px;
  }

6.  Ahora vamos a mostrar lo que tenemos en el data-label al lado derecho y aplicamos
 letra de color azul en negrilla mediante estas propiedades:

  table.tablaPrecios td:before{
    content: attr(data-label);
    float: left;
    color: #273b47;
    font-weight: bold;
    font-size: 1em;
    padding: 1px 5px;
  }```

1. Podemos aprovechar para darle más protagonismo a la imagen, entonces vamos a quitar el último label y modificamos el tamaño de la imagen. Para ellos usamos esta expresión not(:last-child), centramos y asignamos 50% en el ancho. Podemos eliminar las márgenes.

      table.tablaPrecios td:last-child{
         text-align: center;
      }
      
      .tabla {
        margin: 0;
      }

      img{
        width: 50%;
      }


   }  /* fin media query */
   </style>

  </body>
</html>

Acá se puede ver el resultado con ancho menor a 800px https://sumelio.github.io/responsive-design/precios.html

De esta forma también podemos aprovechar para implementar Lazy loading en dispositivos pequeños con las imágenes de cada modelo.