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.

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.

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)

Responsive Tables macht große Tabellen auf kleinen Geräten nutzbar

Tabellen sind in responsiven Layouts nicht nur dann eine Plage, wenn sie zu Layoutzwecken missbraucht werden. Selbst bei korrektem Einsatz als Inhaltstabelle kommt es je nach Größe der Tabelle, respektive deren Inhalts, häufig genug vor, dass das Layout nicht so skalieren kann, wie es erforderlich wäre. Der allseits beliebte horizontale Scrollbalken erscheint. Aber auch, wenn das nicht der Fall ist, skalieren Tabellen im Regelfall zur Unbrauchbarkeit herunter. Zurb, die Entwickler des bekannten Frameworks Foundation, legen mit Responsive Tables eine Lösung vor, die nicht perfekt ist, aber zeigt, wie es auch gehen kann.

Zurbs Responsive Tables: CSS + JavaScript = lesbare Tabellen

Neben dem Ziel, dass Tabellen responsive Layouts nicht zerstören sollen, wollte das Entwicklerteam zwei weitere wichtige Punkte erfüllt sehen. Zum einen sollte die responsive Tabelle nicht unnötig Tabelleninhalte verbergen und zum anderen sollte es den Betrachtern immer noch möglich sein, Tabellen mit einer als Schlüssel definierten Spalte vernünftig bedienen zu können. So schaute man sich die Standardstruktur real existierender Tabellen an und kam zu dem Schluss, dass zumeist die erste Spalte eben diese Schlüsselspalte darstellt. Die Entwickler entschlossen sich, dafür zu sorgen, dass diese erste Spalte stets sichtbar bleibt, unabhängig von der Displaygröße insgesamt.

Das folgende Schema verdeutlicht das Prinzip:

Technisch gelöst wird das durch zwei unterschiedliche Divs, deren eines die erste Spalte enthält und im Z-Index oberhalb des darunter liegenden scrollbaren Divs mit den restlichen Tabelleninhalten angeordnet wird. So muss die Tabelle zwar, je nach Auflösung des mobilen Clients mehr oder weniger stark gescrollt werden. Sie bleibt jedoch immer bedienbar und Werte lassen sich sinnvoll vergleichen.

Die Tabelle bei normaler Auflösung… … und auf einem kleinen Screen.

Es gibt allerdings einige Einschränkungen. Die Tabellenzeilen werden auf eine gemeinsame Höhe, nämlich zur Einzeiligkeit der Inhalte gezwungen, damit unterschiedlich bevölkerte Tabellenzellen nicht allein deshalb erneut das Layout zerschießen. Zudem ist die Lösung nur in Browsern lauffähig, die scrollbare Div-Container unterstützen, was im Webkit der Android-Version 2.3 und darunter etwa nicht gegeben ist. Zurb entwickelte Responsive Tables für sein Framework Foundation, stellt es aber im Rahmen seines Playground auch zur unabhängigen Nutzung zur freien Verfügung.

Responsive Tables sind schnell implementiert

Die Anwendung der Lösung ist einfach. Lediglich die beiden Dateien responsive-tables.js und responsive-tables.css sind erforderlich. Es gibt keine weiteren Abhängigkeiten.

Will man Responsive Tables dann auf eine Datentabelle anwenden, vergibt man dieser schlicht die Klasse .responsive und Zurb kümmert sich um den Rest.

Die Entwickler versprechen volle Funktionalität unter iOS, Windows Phone und Android ab 2.4, sowie den Desktop-Browsern Chrome, Safari und Firefox.