lámání tabulky pro mobil s akordeonem

by Petr Haluza

HTML

<div class="table-wrapper">
  <table id="js-contacts">
    <caption><h1>Lámání tabulky pro mobil</h1></caption>
    <thead>
      <tr>
        <th>Jméno</th>
        <th>Pozice</th>
        <th>Email</th>
        <th>Tel.</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td onclick="toggle()">
          <button><i data-lucide="chevron-down"></i><i class="icon-active" icon-name="chevron-up"></i></button>
          <img src="https://100k-faces.glitch.me/random-image?id=1" />Jarda Vysmátý
        </td>
        <td>Skladník</td>
        <td>[email protected]</td>
        <td>777 666 555</td>
      </tr>
      <tr>
        <td onclick="toggle()">
          <button><i icon-name="chevron-down"></i><i class="icon-active" icon-name="chevron-up"></i></button>
          <img src="https://100k-faces.glitch.me/random-image?id=2" />Jarda Vysmátý
        </td>
        <td>Skladník</td>
        <td>[email protected]</td>
        <td>777 666 555</td>
      </tr><tr>
        <td onclick="toggle()">
          <button><i icon-name="chevron-down"></i><i class="icon-active" icon-name="chevron-up"></i></button>
          <img src="https://100k-faces.glitch.me/random-image?id=3" />Jarda Vysmátý
        </td>
        <td>Skladník</td>
        <td>[email protected]</td>
        <td>777 666 555</td>
      </tr><tr>
        <td onclick="toggle()">
          <button><i icon-name="chevron-down"></i><i class="icon-active" icon-name="chevron-up"></i></button>
          <img src="https://100k-faces.glitch.me/random-image?id=4" />Jarda Vysmátý
        </td>
        <td>Skladník</td>
        <td>[email protected]</td>
        <td>777 666 555</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://unpkg.com/lucide@latest"></script>
<script>
  lucide.createIcons();
</script>

CSS

* {  box-sizing: border-box;}
html {}
body { line-height: 1.5;  max-width: 1420px;  margin: 0 auto;}

table { border-collapse: collapse; width: max-content;}
thead th { font-weight: bold; vertical-align: top;}
thead th,
tbody td { padding: 1em; }
tbody td { vertical-align: middle;}
tbody tr {border:1px solid #cde}
tbody tr:nth-child(odd) {  background-color: #f0f5f9;}
thead {}
tbody td::before {  display: none;}
tbody button {  display: none;}
button { cursor: pointer; all: unset;  vertical-align: middle;  margin-right: 1em;}
img {  border-radius: 100%;  width: 4em;  aspect-ratio: 1;  display: inline-block; vertical-align: middle;  margin-right: 1em;}

@media screen and (max-width: 880px) {
  thead tr > *:not(:first-child) { display: none; }
  thead tr > *:first-child { padding-left: 4em;  }
  tbody,
  tbody tr,
  tbody td { display: flex; flex-direction: column; word-break: break-all;}
  tbody td { flex-direction: row;}
  .row-active td:first-child { }
  tbody td:not(:first-child) {padding: 0; padding-left:4em}
  tbody td:last-child { padding-bottom:2em}
  tbody td:first-child { flex-direction: row; align-items: center;}
  tbody tr:not(.row-active) > *:not(:first-child) { max-width: 0; max-height: 0; overflow: hidden; padding: 0; }
  tbody button { display: inline-block; }
  tbody td:not(:first-child)::before { display: block; font-weight: 600; }
  .table-wrapper { max-width: 568px; }
  tr:not(.row-active) .icon-active { display: none;}
  .row-active svg:not(.icon-active) { display: none;}
}

JavaScript

function ResponsiveCellHeaders(elmID) {
  try {
    var THarray = [];
    var table = document.getElementById(elmID);
    var ths = table.getElementsByTagName("th");
    for (var i = 0; i < ths.length; i++) {
      var headingText = ths[i].innerText;
      THarray.push(headingText);
    }
    var styleElm = document.createElement("style"),
      styleSheet;
    document.head.appendChild(styleElm);
    styleSheet = styleElm.sheet;
    for (var i = 0; i < THarray.length; i++) {
      styleSheet.insertRule(
        "#" +
          elmID +
          " td:nth-child(" +
          (i + 1) +
          ')::before {content:"' +
          THarray[i] +
          ': ";}',
        styleSheet.cssRules.length
      );
    }
  } catch (e) {}
}

ResponsiveCellHeaders("js-contacts");


function toggle() {
  const row = this.window.event.target.closest("tr");
  row.classList.toggle("row-active");
  const isActive = row.classList.contains("row-active");
  const activeColumns = row.querySelectorAll("td:not(:first-child)");
}