CSS: responsive Tabellen

Datum
18.10.2021

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

Jahr Schule Abschluss
2020 – 2022 Medien Colleg Rostock Mediengestalter Digtal / Print (Umschulung)
2013 – 2015 HTW Berlin Angewandte Informatik Bachelor (abgebrochen)
2010 – 2013 OSZ Hein Möller Staatlich geprüfter Technischer Assistent für Elektronik und Datentechnik


Fachhochschulreife

2009 – 2010 VHS – Abendschule Mittlerer Schulabschluss
2007 – 2009 VHS – Abendschule Hauptschulabschluss

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.

marc borkowski
Autor: Marc Borkowski

Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Rostock. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bilde mich aktuell im grafischen Bereich weiter. Meine Zukunft sehe ich beim gestalterischen Web.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Twitter logoInstagram logoYouTube Logo

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare anschauen
Kommentare (0)