Design

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

7. Juni 2012
von

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.

<link rel="stylesheet" href="responsive-tables.css">
<script src="stylesheet" href="responsive-tables.js"</script>

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

<table class="responsive">
  <tr> …

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

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

3 Kommentare zu „Responsive Tables macht große Tabellen auf kleinen Geräten nutzbar
  1. […] Responsive Tables – Dr. Web […]

  2. Hans Blank am 16. Juli 2012 um 12:48

    Da gibt’s noch andere Lösungsansätze: http://css-tricks.com/responsive-data-table-roundup/

  3. […] Responsive Tables macht große Tabellen auf kleinen Geräten nutzbar – Dr. Web Magazin […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!