Eine Tabelle mobil-freundlich machen

Innerhalb kurzer Zeit sprach ich mit zwei Menschen darüber, wie man tabellarische Daten optimal auf Smartphones transportieren könnte. Breitere Tabellen machen auf den kleinen Displays ja nicht unbedingt Spaß. Schnell ging die Diskussion darum, welche Listenform man denn nehmen solle und ob das ein Fall für eine Definitionsliste sei.

Ich bin in solchen Situationen sehr grundsätzlich, man kann es auch altmodisch nennen. Ich gebe nicht so schnell auf, für die anstehende Aufgabe die korrekten semantischen Elemente zu nutzen. Für die Darstellung nimmt man dann schliesslich immer CSS. Aber gerade Tabellen sind natürlich in jeglicher Hinsicht ein Grenzfall. Tabellen haben ein eigenes Tabellenmodell. Es ist zudem nicht immer intuitiv und einfach entscheidbar, ob man Informationen als Tabelle oder Liste umsetzen sollte. Aber im heutigen konkreten Fall lagen die Daten auch richtigerweise als Tabellen vor.

Um den Arbeitsaufwand so gering als möglich zu halten, war eine Transformation der Struktur ohne erneute Eingriffe erwünscht. Natürlich kann man mit jQuery nachhelfen und für Smartphones aus einer Tabelle eine Liste machen. Doch die Beispielseite hatte so umfangreiche Tabelleninformationen, dass ein Einsatz von jQuery das Smartphone schnell zum Glühen bringen könnte.

Ein nur mittels CSS funktionierender Ansatz (siehe unten) fiel mir recht schnell ein. Man muss für die alten IE (oldIE) nur von CSS3-Selektoren auf Klassenselektoren umstellen, dann funktioniert es bis zum IE7 reibungslos (den IE6 habe ich nicht getestet). Da es sich bei der Aufgabe aber darum handelt, eine Tabelle für Smartphones nutzbar zu machen, können wir oldIE getrost vergessen.

Für die Wandlung von einer Tabelle in eine Liste und später (weiter unten im CSS) als Floats brauchen wir nur wenige Regeln, nur eine Zeile. Der überwiegende Teil des folgenden CSS wird für die Aufhübschung genutzt. Der Ansatz funktioniert auf alle Fälle bei Tabellen mit wenigen Spalten. Ich kann mir aber auch vorstellen, dass er bei Tabellen mit mehr als zehn Spalten gut funktioniert.

Speziell die Nutzung moderner CSS3-Selektoren macht hier die Arbeit leicht. Chris Coyer hat zu dem Thema eine Übersicht verschiedener Techniken erstellt.

Dirk Jesse merkte noch an, dass er die Optik genau anders erwarten würde, als ich es in meinem Beispiel demonstrierte. Der Anfangszustand soll erst kommen, wenn man die Grundfläche verkleinert (unbedingt das Fenster mal kleiner schieben!). Also habe ich eine zweite Version gemacht, in der ich die Optik umgedreht habe.

2 Kommentare

  1. Ich habe darüber in der letzten Ausgabe des Webstandardsmagazin aka Screenguide geschrieben und dabei folgendes Demo erstellt: http://out.li/ne/resptabledemo

    • Jens Grochtdreis

      27. März 2012 um 21:25 Uhr

      Prima. Da sind wir ja auf die gleiche Idee gekommen. Muss mir die Screenguide eh noch durchlesen.