Tabellen responsiv gestalten – mit CSS, ohne JavaScript

Responsives Webdesign ist längst zu einem festen Bestandteil der Webentwicklung geworden. Die zunehmende mobile Internetnutzung macht es erforderlich, dass jede Website auch auf kleinen Displays zu erkennen ist. Das stellt Webdesigner und -entwickler immer wieder vor Herausforderungen. Wo bringe ich die komplexe Navigation unter? Wie stelle ich Fotos und Grafiken zur Verfügung? Was mache ich mit breiten, vielspaltigen Tabellen? Auf letztere Frage gibt es gleich mehrere mögliche Antworten. Denn die eine, immer richtige Lösung für Tabellen gibt es nicht.

Anzeige

Tabellen scrollbar machen

Eine recht einfache Möglichkeit, ist es, Tabellen einfach vertikal scrollbar zu machen. Hierbei bleibt die Tabelle in ihrer Breite unverändert. Mit etwas CSS wird lediglich dafür gesorgt, dass die Tabelle nicht die Breite des Layouts sprengt, sondern der sichtbare Bereich auf die Display- beziehungsweise Layoutbreite beschnitten wird. Mit dem Finger kannst du die Tabelle allerdings nach links und rechts verschieben.

table {
  display: block;
  overflow: scroll;
}

Um eine Tabelle scrollbar zu machen, bedarf es lediglich zweier CSS-Eigenschaften. Zum einen muss aus der Tabelle ein Blockelement werden – per „display“. Zum anderen muss per „overflow“ dafür gesorgt werden, dass alles, was über die Breite des Weblayouts hinaus geht, nicht dargestellt wird. Dieser Bereich ist dann aber per vertikalem Scrollen erreichbar.

Scrollbare Tabelle
Zusätzlich sollte man den Tabellenspalten entweder feste Breiten zuweisen oder per „white-space“ verhindern, dass ein automatischer Umbruch erfolgt.

table th, table td {
  white-space: nowrap;
}

Andernfalls wird die Tabelle immer auf die Breite des Weblayouts zurechtgestutzt, was zu unschönen und vor allem vielen Zeilenumbrüchen führt.

Anzeige

Tabellenspalten untereinander darstellen

Die erste Variante hat zwar den Vorteil, dass sie einfach umzusetzen ist und du immer eine Spalte der Tabelle komplett im sichtbaren Bereich hast. Je nach dargestellten Daten ist es jedoch sinnvoller, immer den Inhalt einer Zeile komplett sichtbar zu haben. Auch hierfür gibt es eine Lösung, die etwas umständlicher ist, aber ebenfalls ohne JavaScript auskommt.

Die zweite Variante wird eine Tabelle komplett aufbrechen und jede Zeile mit den entsprechenden Spaltenbezeichnungen als Block untereinander darstellen. Hierfür ist es zunächst notwendig, dass per Data-Attribut die Spaltenbezeichnungen jeder Zelle einer Zeile hinzugefügt werden.

<table>
  <tr>
    <th>Name</th>
    <th>Straße</th>
    …
  </tr>
  <tr>
    <td data-th="Name">Manfred Mustermann</td>
    <td data-th="Straße">Musterstraße 1</td>
    …
  </tr>
  …

Im Beispiel wird also der ersten Zelle einer Zeile per „data-th“ die Bezeichnung der ersten Spalte zugewiesen, der zweiten Zelle die Bezeichnung der zweiten Spalte. Dies muss für alle Zeilen der Tabellen wiederholt werden.

Untereinander dargestellte Tabellenzeilen
Anschließend müssen die Zeilen und Zellen als Blockelemente dargestellt werden und die Kopfzeile darf nicht mehr sichtbar sein.

table td, table tr {
  display: block;
}

table th {
  display: none;
}

Danach setzt du das Pseudoelement „::before“ ein, um den Wert des Attributes „data-th“ vor jeden Zelleninhalt zu platzieren.

table td::before {
  content: attr(data-th)":";
  display: inline-block;
  font-weight: bold;
  margin-right: 0.25em;
}

Per „content“ wird dem Pseudoelement der Wert des Data-Attributes sowie ein Doppelpunkt zugewiesen. Das Ganze stellst du dann noch als Inline-Block-Element dar.

Die ganzen CSS-Definitionen solltest du zudem innerhalb eines Media-Queries-Bereichs platzieren, so dass sie nur für bestimmte Auflösungen ausgegeben werden. Diese zweite Lösung funktioniert in allen modernen Browsern. Nur der Internet Explorer 9 und ältere Versionen haben so ihre Probleme damit.

Fazit und Beispiele

Beide Lösungen haben ihre Berechtigung. Die erste sorgt für eine gute Übersicht, wenn es darum geht, einzelne Spalten darzustellen. Die zweite Lösung ist optimal, wenn es wichtig ist, den Inhalt einzelner Zeilen im Blick zu haben.

• Responsive Tabellen zum Scrollen (Beispiel auf Codepen)
• Responsive Tabellen als Absatz (Beispiel auf Codepen)