Responsive Tabellen sind Darstellungsweisen, die eine breite Datentabelle auf schmalen Bildschirmen lesbar halten. Eine Tabelle ist das einzige Layoutelement, das sich nicht beliebig umbrechen lässt, weil ihre Aussage erst aus der Position in Zeile und Spalte entsteht. Für dieses Problem gibt es bis heute mehrere Ansätze, die jeweils einen anderen Preis haben.
- Responsive Tabellen
Darstellungsweisen, die eine breite Datentabelle auf schmalen Bildschirmen lesbar halten, ohne ihre Zeilenlogik zu zerstören.
Beispiel: „Die Preistabelle wird unterhalb von 640 Pixeln zu einer Karte je Zeile umgebaut.“Gemeint sind Datentabellen mit Kopfzeile. Tabellen, die früher zur Seitengestaltung benutzt wurden, fallen nicht darunter.
Abgrenzung: Schwierig wird eine Tabelle durch ihre Spaltenzahl. Viele Zeilen lassen sich durch Blättern, Sortieren oder Filtern in den Griff bekommen, viele Spalten brauchen eine andere Darstellung.
Eine Tabelle trägt ihre Bedeutung in zwei Richtungen
Ein Wert in einer Tabelle bedeutet nur etwas im Zusammenspiel von Zeilenkopf und Spaltenkopf. Sobald eine Spalte umbricht, wegfällt oder an eine andere Stelle rutscht, bleibt eine Zahl ohne Bezug übrig.
Genau deshalb greifen die Werkzeuge, die im Responsive Design sonst alles lösen, hier ins Leere: Flexbox und CSS Grid ordnen Elemente beim Umbruch neu an, und eine Neuordnung ist das Einzige, was eine Tabelle nicht verträgt.
Die gängigen Ansätze und was sie kosten
Der einfachste Weg ist horizontales Scrollen innerhalb eines eigenen Bereichs. Die Tabelle bleibt vollständig erhalten, alles rechts vom Rand verschwindet jedoch aus dem Blick, und ohne sichtbaren Hinweis wird der Scrollbereich regelmäßig übersehen. Der zweite Weg klappt jede Zeile zu einer Karte um, in der jeder Wert seinen Spaltenkopf als Beschriftung mitbekommt. Das liest sich auf dem Telefon angenehm und macht den Vergleich zwischen zwei Zeilen praktisch unmöglich, weil sie nie gleichzeitig sichtbar sind.
Der dritte Weg blendet weniger wichtige Spalten unterhalb einer Breite aus und bietet sie über eine Detailansicht an. Das setzt voraus, dass sich die Spalten sauber nach Wichtigkeit ordnen lassen, was bei Vergleichstabellen selten zutrifft. Der vierte Weg friert die erste Spalte ein und scrollt nur den Rest. Er hält den Zeilenbezug, solange die erste Spalte kurz genug bleibt.
Woran wir die Entscheidung festmachen
Die Auswahl hängt am Lesezweck. Wer einzelne Werte nachschlägt, etwa technische Daten zu einem Produkt, kommt mit der Kartenansicht am weitesten. Wer Zeilen gegeneinander abwägt, etwa Tarife, braucht die Spalten nebeneinander und damit den Scrollbereich. Wir empfehlen dann einen angeschnittenen Rand, damit überhaupt jemand auf die Idee kommt zu wischen.
Die WCAG-Anforderung zum Reflow verlangt Inhalte, die sich ohne Scrollen in zwei Richtungen nutzen lassen, nimmt davon aber alles aus, was eine zweidimensionale Anordnung braucht. Datentabellen werden dort ausdrücklich als Beispiel genannt. Der Scrollbereich ist damit zulässig, seine schlechte Auffindbarkeit bleibt trotzdem ein Problem.