JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<table>
     <caption>Liste des employés</caption>
     <thead>
         <tr>
             <th>Nom</th>
             <th>Prénom</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td data-label="Nom" aria-label="Nom">Dupont</td>
             <td data-label="Prénom" aria-label="Prénom">Jean</td>
         </tr>
         <tr>
             <td data-label="Nom" aria-label="Nom">Foo</td>
             <td data-label="Prénom" aria-label="Prénom">Bar</td>
         </tr>
     </tbody>
 </table>

SCSS

@media (max-width: 850px) {
  table {
    display: block;
  }
  
  caption {
    display: block;
  }

  thead {
    position: absolute;
    left: -9999px;
  }

  tbody {
    display: block;

    // Stack the cells vertically
    tr {
      display: flex;
      flex-direction: column;

      &:nth-child(even) {
        background-color: white;
      }
    }
  }

  tr:not(:first-child) {
    border-top: 15px solid white;
  }

  th {
    background-color: lightgray;
  }

  // Each cell with a `data-label` describing the content of the matching column heading will display the content of that data-label in front of the cell value via a pseudo-element.
  [data-label] {
    display: flex;

    &::before {
      content: attr(data-label);
      margin-right: auto;
    }

    &:nth-child(odd) {
      background-color: lightgray;
    }
  }
}