1. Principals problemes de les taules a la web

Les taules HTML (<table>) van ser concebudes originalment per mostrar dades tabulars de mida fixa. En l'era del disseny responsiu, presenten reptes d'usabilitat notables:

Desbordament horitzontal (Overflow): Les taules calculen la seva amplada mínima basant-se en el contingut de les seves cel·les. En pantalles estretes, la taula s'amplia més enllà dels límits de la pantalla, trenca el disseny general o força un desplaçament horitzontal.
Pèrdua de context de les dades: Quan l'usuari fa un desplaçament vertical en una taula llarga des d'un mòbil, la fila superior (<th>) desapareix de la vista, fent impossible saber quin concepte representa cada valor.
Alta densitat d'informació i illegibilitat: Intentar encabir moltes columnes redueix la font i comprimeix el text de manera poc pràctica, provocant salts de línia estranys o complicant la selecció i clic en elements interactius.

3. Solucions tècniques amb CSS i JS

A) Solució Bàsica: Contenidor amb Scroll Horitzontal

Consisteix a mantenir l'estructura original de la taula però col·locant-la dins d'un contenidor <div> que gestioni el desplaçament horitzontal de forma aïllada.

HTML:

<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Producte</th>
        <th>Preu</th>
        <th>Estoc</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Camisa Tècnica</td>
        <td>29.99 €</td>
        <td>12 unitats</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Scroll suau en dispositius iOS */
  margin-bottom: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap; /* Evita que el text es trenqui inoportunament */
}

table th, table td {
  padding: 10px 15px;
  border: 1px solid #ddd;
}

B) Solució Avançada: Transformació a Targetes (Cards)

Mitjançant Media Queries de CSS, canviem el disseny de la taula perquè en mòbil cada fila es converteixi en un bloc tipus "card", injectant el nom del camp mitjançant l'atribut data-label.

HTML:

<table class="responsive-card-table">
  <thead>
    <tr>
      <th>Producte</th>
      <th>Preu</th>
      <th>Estoc</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Producte">Camisa Tècnica</td>
      <td data-label="Preu">29.99 €</td>
      <td data-label="Estoc">12 unitats</td>
    </tr>
  </tbody>
</table>

CSS:

@media screen and (max-width: 768px) {
  /* Convertim la taula i els seus elements en blocs */
  .responsive-card-table, 
  .responsive-card-table thead, 
  .responsive-card-table tbody, 
  .responsive-card-table th, 
  .responsive-card-table td, 
  .responsive-card-table tr {
    display: block;
  }

  /* Ocultem les capçaleres originals de la taula */
  .responsive-card-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .responsive-card-table tr {
    border: 1px solid #ccc;
    margin-bottom: 1rem;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
  }

  .responsive-card-table td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%; /* Espai per a l'etiqueta */
    text-align: right;
  }

  .responsive-card-table td:last-child {
    border-bottom: none;
  }

  /* Creem l'etiqueta lateral llegint l'atribut data-label */
  .responsive-card-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: #555;
  }
}

C) Automatització amb JavaScript

Si la taula es genera de manera dinàmica des d'un servidor o API, pots usar un script per afegir automàticament els atributs data-label a cada cel·la basant-se en el contingut del <th>.

JavaScript:

document.addEventListener("DOMContentLoaded", function() {
  const table = document.querySelector('.responsive-card-table');
  if (!table) return;

  // Obtenim els textos de les capçaleres TH
  const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim());
  const rows = table.querySelectorAll('tbody tr');

  // Assignem el data-label corresponent a cada cel·la TD
  rows.forEach(row => {
    const cells = row.querySelectorAll('td');
    cells.forEach((cell, index) => {
      if (headers[index]) {
        cell.setAttribute('data-label', headers[index]);
      }
    });
  });
});

Problemes i Solucions de Taules Responsives