Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Tabellen, die sich anpassen

Responsive Webdesign

Tabellen, die sich anpassen

Tabellen können sehr komplex werden. Oft sind sie schon an Deskptop-Rechnern unübersichtlich. Doch wie gehen wir mit ihnen in responsiven Projekten um und bereiten ihre Inhalte sinnvoll für kleine Bildschirme auf?

Responsive Webdesign ist keine einfache Sache, das sollte sich herumgesprochen haben. Neben einer anderen Art zu denken und an Projekte heranzugehen, stoßen wir immer wieder auf Herausforderungen im Layout. Tabellen sind eine solche Herausforderung. Denn schließlich gilt es, eine Tabelle so zu formatieren, dass sie auch auf einem kleinen Monitor bedienbar und verständlich ist.

Es gibt viele Arten von Tabellen

Es ist eine simple Erkenntnis, aber sie ist wichtig: Es gibt nicht die Tabelle, es gibt sehr viele unterschiedlich komplexe Tabellen. Deshalb gibt es auch keine einfache, für alles gültige Lösung. Es kann sich anbieten, eine Tabelle auf kleinen Monitoren in ein Diagramm zu wandeln und die Tabelle selber auszublenden. Zudem bietet sich JavaScript an, um eine Tabelle besser nutzbar zu machen. Es gibt aber auch reine CSS-Techniken, um eine Tabelle umzuformatieren.

Umformatierung mit CSS

Tabellen sehen in HTML-Dokumenten nach Tabellen aus, weil ihnen die passenden display-Eigenschaften vom Browser-Stylesheet mitgegeben werden. Diese hat bspw. die Ausprägungen table, table-row oder table-cell. Webworker können sich dies zu Nutze machen und die display-Eigenschaften ändern. Die einfachste Variante ist, allen Tabellen-Elementen ein display: block zu geben. Das führt dazu, dass alle Tabellenzellen schlicht untereinander gesetzt werden. Dabei muss der Webworker dann zwei Herausforderungen meistern:

  1. Zum einen muss der Tabellenkopf versteckt werden, da er nicht mehr gebraucht wird. Wir positionieren ihn dazu absolut und schieben ihn weit außerhalb des Viewports.
  2. Zum anderen müssen die Inhalte des Tabellenkopfes nun nachträglich zu den Inhalten generiert werden; am Besten ohne Hilfe von JavaScript. Dafür geben wir allen Tabellenzellen ein data-Attribut, dessen Inhalt den Titel des jeweiligen Tabellenkopfes wiedergibt. Diese Inhalte werden dann ausgelesen und in der content-Eigenschaft wiedergegeben.

Table Demo 4 - responsive von Jens Grochtdreis (@jensgro) auf CodePen anschauen.

So schön und schön einfach diese Variante auch ist, der IE 9 kann nicht mit ihr umgehen. Aber das sollte niemanden davon abhalten, sie zu benutzen. Denn Ziel einer solchen Umformatierung sind schließlich Geräte mit kleinen Bildschirmen. Der IE9 ist der Browser auf alten Windows-Phone-7-Telefonen. Netmarketshare – als eine Beispielquelle – gibt als Verbreitungsgrad ganze 0,29% an. Damit ist der IE9 kein ernst zu nehmender Hemmschuh.

Ein anderer Ansatz funktioniert u.a. mit Floats. Hierbei wird der Tabellenkopf nach links gefloatet, der Tabellen-Body bekommt ein overflow: scroll, damit dessen Inhalt später mittels Scrollbar erreichbar ist. Um die Inhalte dem umarrangierten Tabellenkopf anzupassen, müssen nun die Tabellenreihen mit display: inline-block und die Zellen mit display: block formatiert werden. Jetzt haben wir in der Tabelle quasi x- und y-Achse vertauscht. Auf kleineren Monitoren sind die Inhalte jetzt besser zu lesen. Auch hier spielt der IE9 wieder nicht mit.

Responsive Table von Jens Grochtdreis (@jensgro) auf CodePen anschauen.

Weiterführende Links

Tabellen sind in responsiven Projekten immer eine Herausforderung. Deshalb sollten Webworker sich intensiv und immer wieder mit ihnen auseinandersetzen. Die oben beschriebenen Techniken sind ein Ausschnitt der vielen Möglichkeiten. Die folgenden Links sollen das Bild kompletter machen:

Kommentare

Gunnar Bittersmann
am 21.12.2014 - 13:24

Zum einen muss der Tabellenkopf versteckt werden, da er nicht mehr gebraucht wird. Wir positionieren ihn dazu absolut und schieben ihn weit außerhalb des Viewports.

Nei-en!! Das tun wir nicht! Zeldman hat vor nun schon fast 3 Jahren erklärt, warum nicht. Das sollte sich inzwischen herumgesprochen haben. Die Alternativen sollten auch bekannt sein, siehe „visuallyhidden“ bei Chris Coyier.

Bei responsiven Tabellen kann man auch noch mehr tun als display-Eigenschaften zu ändern. Bspw. automatische Silbentrennung ein- bzw. ausschalten, damit die Inhalte auch bei schmalen Spalten vernünftig dargestellt werden können. (Ja, liebe Chrome-Nutzer, so etwas gibt es in vernünftigen[tm] Browsern. ;-))

Mathias Apsel hat mein Beispiel mal in einen Artikel gegossen.

Permanenter Link

Matthias Apsel
am 22.12.2014 - 08:19

Ein einfaches display: none; sollte genügen, weil Screenreeder dieses CSS gar nicht zu Gesicht bekommen, wenn man die mediaqueries entsprechend formuliert.

Permanenter Link

Die Kommentare sind geschlossen.