Tabellen im Responsive Webdesign

tabellen-responsive-design

Wer schon einmal eine Website mit tabellarischen Inhalten für mobile Endgeräte optimieren musste weiß: Tabellen und responsive Webdesign passen nicht gut zusammen. Ich spreche hier natürlich nicht von Tabellen die für das Layout missbraucht wurden (es dürfte klar sein, dass Tabellen NIE im Layout verwendet werden) sondern von Inhalten die in Form eine Tabelle abgebildet werden sollen. Solche Tabellen eignen sich nicht gut für die Darstellung auf einem kleinen Bildschirm und werden recht schnell unübersichtlich.
Ich möchte euch in diesem Beitrag verschiedene Lösungsansätze für Tabellen im Responsive Design vorstellen und die jeweiligen Vor- und Nachteile aufzeigen.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Kompromisse sind gefragt

Tabellen werden in der Regel dazu verwendet umfangreiche Datenmengen übersichtlich abzubilden. Dazu wird Platz benötigt und auch die Schriften müssen eine lesbare Größe beibehalten.

Im Responsive Design werden immer identische Inhalte visuell für verschiedene Displaygrößen optimiert. Eine große Tabelle passt aber nicht auf das Display eines Smartphones, es sei denn die Schriftgröße wird bis zur Unleserlichkeit verkleinert. Eine Tabelle verliert daher auf einem Smartphone fast immer an Übersichtlichkeit oder Lesbarkeit. Unser Ziel ist es die Inhalte der Tabelle bestmöglich darzustellen.

Welche der folgenden Lösung dabei zum Einsatz kommt und am geeignetsten ist hängt vor allem von den abgebildeten Informationen ab.

Tabellen zoomen

Smartphones und Tablets verfügen von Haus aus über eine Zoomfunktion. Grundsätzlich besteht daher die Möglichkeit eine große Tabelle herausgezoomt abzubilden. Der Besucher kann anschließend die Tabelle selbst auf die gewünschte Darstellung vergrößern und in der Tabelle scrollen.
Diese Variante halte ich für sehr benutzerunfreundlich. Zum einen geht die Übersicht in einer zumutbaren Schriftgröße völlig verloren, zum anderen ist es lästig sich über den Zoom in der Tabelle zu bewegen.

Gezoomte Tabellen im responsive Design

Gezoomte Tabelle auf dem Smartphone. Beide Ansichten sind benutzerunfreundlich.

Überflüssige Inhalte ausblenden

Über CSS3 Media Queries können auch Inhalte ausgeblendet werden (display:none; / visibility:hidden;). Es wäre also möglich weniger wichtige Tabellenzeilen oder –spalten mit einer entsprechenden Klasse auszuzeichnen und dann auf dem kleinen Bildschirm zu verstecken. Hierbei wird allerdings zusätzliches, überfüssiges Markup erzeugt.
Alternativ können die Tabellenzellen auch über den CSS-Selektor :nth-child mathematisch identifiziert und ausgeblendet werden.

Inhalte werden im responsive Design aus der Tabelle ausgeblendet

Tabellenzellen können versteckt werden sobald zu wenig Platz zur Verfügung steht.

Eine einfache Erklärung zum Thema :nth-child findet ihr hier, die gesamte Technik im Bezug auf responsive Design wird ausführlich auf irishstu.com beschrieben.

Horizontal scrollbare Tabellen

Wenn die Tabelle inhaltlich sehr komplex ist und nicht umstrukturiert werden kann, steht man häufig vor einem Problem. Eine sehr komfortable und technisch unkomplizierte Lösung ist das horizontale Scrollen der ganzen Tabelle. Dafür ist ein Container-Element notwendig, dass die Tabelle umschließt. Zusätzlich müssen die Scrollbalken auf mobilen Betriebssystem eingeblendet werden, da sie normalerweise erst sichtbar sind, wenn bereits gescrolled wird.

Video-Screenshot einer scrollbaren Tabelle

Horizontal scrollbare Tabelle unter iOS

Das Beispiel lässt sich mit folgendem Code realisieren:

<div class="table-scrollable">
  <table>
    …
  </table>
</div>
table { /* Styling der Tabelle */ }

.table-scrollable {
  width: 100%;
  overflow-y: auto;
  margin: 0 0 1em;
}

.table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

Beispiel anschauen

Container automatisch per jQuery hinzufügen

Solltet ihr keinen Einfluss auf das Markup haben – Beispielsweise weil ein Kunde über das CMS selbstständig Tabellen erstellen kann – hilft jQuery ggf. weiter um das Container-Element hinzuzufügen. Mit folgendem jQuery-Code werden alle <table>-Elemente mit <div class="table-scollable"> … </div> umschlossen.

<script>
$(document).ready(function(){
$("table").wrap('<div class="table-scrollable"></div>');
});
</script>

Beispiel anschauen

Scrollende Tabellen mit fester 1. Spalte

Die Entwickler von Zurb haben ein Framework für Responsive Tables veröffentlicht mit dem Tabellen per JavaScript und CSS für kleine Bildschirme optimiert werden können. Das Script lässt sich sehr einfach integrieren und passt die Darstellung der Tabelle über den z-index an. Die erste Spalte der Tabelle wird auf eine eigene Ebene ausgelagert und fest positioniert. Die anderen Tabelleninhalte können horizontal unter dieser Ebene gescrolled werden.

Responsive Tables

Responsive Tables mit fester 1. Spalte und scrollendem Tabellen-Körper.

Durch diese Technik ist sichergestellt, dass die erste, wichtige Spalte immer sichtbar bleibt. Gleichzeitig können alle Inhalte der Tabelle sehr benutzerfreundlich angezeigt und mit Spalte 1 verglichen werden.

Tabellen mit CSS umstrukturieren

Es ist auch möglich HTML-Tabellen mit Hilfe von CSS umzustrukturieren. Dem folgenden Beispiel liegt eine klassische Tabelle zu Grunde, die mit CSS gestyled wird. Ab einem bestimmten Breakpoint erhalten die Zeilen (<tr>) eine Breite von 100%, werden gefloatet und richten sich somit untereinander aus. Der Tabellenkopf (<thead>) wird ausgeblendet.

Mit Hilfe von CSS wird die Tabelle umstrukturiert und die Informationen des Tabellenkopfes vervielfacht.
Mit Hilfe von CSS wird die Tabelle umstrukturiert und die Informationen des Tabellenkopfes vervielfacht.

Die Informationen des Tabellenkopfes müssen nun den einzelnen Zeilen vorangestellt werden. Darüber hinaus werden die Informationen mehrfach benötigt. Mit Hilfe eines data-labels ist das allerdings kein Problem.

<td data-label="DIESEN INHALT LESEN WIR WIEDER AUS"> … </td>

Um die gewünschte Darstellung zu erreichen, lesen wir das data-label mit Hilfe der content-Eigenschaft von CSS aus, und fügen den Begriff mit ::before am Anfang jeder Zeile wieder ein.

td::before {
  content:attr(data-label);
}

Beispiel anschauen

Tabellen mit JavaScript umstrukturieren

Mit dem jQuery-Plugin "FooTable" können Tabellen für die mobile Ansicht vollständig umgestellt werden. Mit Hilfe des Data-Attributes von HTML5 werden bestimmte Zellen markiert, den Rest übernimmt das Script. Eine Live-Demo könnt ihr euch hier anschauen.

Drei Ansichten der mit FooTable umstrukturierten Demo-Tabelle

Drei Ansichten der mit FooTable umstrukturierten Demo-Tabelle

Tabellen selbst konstruieren

In einigen Projekten bietet es sich auch an, Tabellen mit Hilfe von <div>s neu zu konstruieren. Diese Lösung sollte vor dem Hintergrund der Semantik allerdings wohl überlegt sein. Um Tabellen mit <div>s zu konstruieren, können die Tabellen-Eigenschaften von CSS genutzt werden. Im folgenden Beispiel wurden Klassen angelegt, die dann das jeweilige Tabellen-Verhalten zugewiesen bekommen. Elemente, die diese Klasse erhalten, verhalten sich anschließend wie das jeweilige Tabellen-Element.

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

Beispiel anschauen

Fazit

Es gibt einige sehr brauchbare Ansätze und Lösungen für Tabellen im responsive Webdesign. Wichtig ist, dass man sich gut überlegt welche Lösung sich für die jeweilige Tabelle am ehesten anbietet. Eine Drehung der Tabelle macht beispielsweise eher bei Tabellen mit starker horizontaler Ausrichtung Sinn. Die erste Spalte zu fixieren ist nur dann sinnvoll, wenn hier die für einen Vergleich relevanten Informationen abgebildet werden etc.

Nachteilig ist, dass nahezu alle Lösungen Inkompatibiltätsprobleme mit älteren Browsern oder dem Internet Explorer haben. Da die angepasste Darstellung allerdings meist auf einem mobilen Endgerät angeschaut wird, auf dem normalerweise auch ein moderner Browser installiert ist, halte ich diesen Punkt für nicht sehr problematisch.

Die besten Scripte für responsive Tables

Eine stets aktuelle Liste der brauchbarsten Scripte findet ihr auf Best Webdesign Tools.

Links zum Thema / Quellen