CSS: responsive Tabellen

Tabellen sind ein praktisches Werkzeug auf Websites, aber die mobile Ansicht bringt Probleme. Deswegen habe ich ein CSS Workaround für Tabellen gebaut, mit der die Tabellen horizontal Scrollbar werden.

Demo

Tabelle erstellen

Zu erst schreibst du eine normale HTML Tabelle. Darum kommt noch ein DIV als Wrapper.

<div class="tableWrapper">
  <table>
    <tbody>
      <tr>
          <th>Jahr</th>
          <th>Schule</th>
      </tr>
      <tr>
          <td>2020 – 2022</td>
          <td>Medien Colleg Rostock</td>
      </tr>
      <tr>
          <td>2013 – 2015</td>
          <td>HTW Berlin</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

Dem DIV Wrapper sagen wir, dass auf der X Achse gescrollt werden soll. Der Tabelle geben wir das Attribut border-collapse: collapse.

.tableWrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}

Fazit

Jetzt kann man auf mobilen Geräten die Tabelle horizontal scrollen, da auf fast allen mobilen Geräten keine Scrollbar bzw. nur eine dezente vorhanden ist, sieht es auch ganz gut aus.