Tabellen im Responsive Webdesign

Wer schon einmal eine Website mit tabellarischen Inhalten für kleine Displays optimieren musste weiß: Tabellen und responsive Webdesign passen nicht gut zusammen. Wir sprechen hier natürlich nicht von Tabellen die für das Layout eingesetzt 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.

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 eher 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. Bei sehr großen Dokumenten (z.B. Excel auf dem Smartphone) ist es aber wahrscheinlich die einzige Lösung. 

Gezoomte Tabellen im responsive Design
Gezoomte Tabelle auf dem Smartphone. Beide Ansichten sind eher benutzerunfreundlich.

Überflüssige Inhalte ausblenden

Über CSS 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 und der Ansatz widerspricht dem Mobile First und RWD-Ansatz.
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. Wichtig ist auch, dass die Benutzer aufgrund der gewählten Gestaltung klar erkennen können, dass die Tabelle überhaupt außerhalb des Displays weitergeht.

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.

HTML-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); // Inhalt des Data-Attributs einfügen
  word-break: break-word; // Bei zu langen Attributen Umbrüche erzwingen
}

Beispiel anschauen

Tabellen mit JavaScript umstrukturieren

Mit dem 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.

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 HTML-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.

Die beste Lösung ist meiner Ansicht nach die gelungene Konzeption der Seiteninhalte. Wenn man es schafft von Beginn an Tabellen so zu planen, dass sie wenig Ärger verursachen, muss später nicht mit JavaScript alles umgebogen werden.

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 22 Kommentare

  1. Barnabas
    schrieb am 04.11.2020 um 20:58 Uhr:

    Ich finde Tabellen scrollbar zu machen ist irgendwie der falsche Weg. Natürlich, wenn es keine andere Möglichkeit gibt, dann muss es halt sein. Aber in Zeiten von mobile First sollte man sich eventuell schon vorher bei der Content-Erstellung Gedanken machen, wie dieser Content mobil dargestellt werden könnte und ob man eine Tabelle dann doch lieber gegen eine Infografik o. ä. tauscht.

    Antworten
  2. Ferris
    schrieb am 04.01.2020 um 16:39 Uhr:

    Hey, danke dir für die Möglichkeiten.
    Ich finde die Tabelle mit DIVs und CSS ziemlich genial.

    Danke Dir! Klappt echt super und schaut gut aus.

    Antworten
  3. Chris
    schrieb am 17.08.2019 um 01:19 Uhr:

    Danke für diese informative Seite.
    Nun klappt das ganz gut mit der Tabelle auf kleinen Bildschirmen.
    Wie muss ich das .css ändern, damit die Spalten untereinander angezeigt werden (Beispiel mit data-labels)?

    Mit dem Beispiel zeigt es mir die Tabelle wie folgt an:

    Stadt | Amsterdam
    Land | Argentinien
    Fluß | Amazonas

    Stadt | Berlin
    Land | Belgien
    Fluß | Brahmaputra


    Was ich aber haben muss ist:

    (Stadt)
    Amsterdam
    Berlin

    (Land)
    Argentinien
    Belgien

    (Fluß)
    Amazonas
    Brahmaputra

    Also genau so eine Tabelle wie im Beispiel in Großansicht,
    aber auf kleinen Bildschirmen mit der Auflistung gemäß dem, was ich haben will?

    Vielen Dank im Voraus.

    Antworten
    • Jonas Hellwig
      schrieb am 19.08.2019 um 09:21 Uhr:

      Hallo Chris,
      du kannst auf kleinen Viewports folgenden CSS-Befehl ergänzen:

      td, td::before {
      display: block;
      width: 100%;
      }

      Antworten
  4. Thomas
    schrieb am 16.01.2019 um 15:16 Uhr:

    Danke schon einmal für die gute Übersicht und die praktischen Beispiele.

    Auch wenn ich wahrscheinlich keine Antwort bekommen werde, möchte ich dennoch eine Frage zu #chapter6 stellen.

    Mein Text-Inhalt in der Spalte ist manchmal so lang, das er umgebrochen wird. Leider wird die Zelle von data-label nicht ‚vergrössert.

    Genauso verhält es sich mit einem Bild, welches in der Spalte enthalten ist. Ich kann es zwar ‚zentrieren‘, aber es überlagert die data-label-Zelle (teilweise).

    Antworten
  5. Silvester Rüfenacht
    schrieb am 19.06.2017 um 11:44 Uhr:

    Vielen Dank für diesen Beitrag, der mir heute geholfen hat.

    Antworten
  6. Inga
    schrieb am 23.03.2017 um 15:18 Uhr:

    Daaaaaaanke!!!! Du bist GROSSARTIG!! genau das hab ich gesucht. 10000000 Arbeitsstunden erspart! I like sehr!! :)

    Antworten
  7. Anja
    schrieb am 28.12.2016 um 19:27 Uhr:

    Ich habe jetzt einiges gelesen und komme doch nicht weiter. Ich habe fünf Zellen, die alle einen Rahmen haben sollen. Unter 768 soll die 3. Zelle mit 100% nach unten rutschen.

    Egal wie ich es mache, immer ist etwas falsch. Flex soll es können, aber ich weiß nicht, ob es überall läuft. Eine Tabelle mit hidden und mehrfachem Code find eich unschön. (3, Zelle ausblenden, neue Zeile einblenden); mit inline-block und float für die dritte Zelle geht es, aber ich kriege den Rahmen nicht hin.

    Gibt es einen schönen Weg dafür?

    Rank Bild Text In Out

    wird klein zu
    Rank Bild In Out
    Text

    Mehr ist es nicht.

    Antworten
  8. Mechthild
    schrieb am 11.04.2016 um 10:50 Uhr:

    ZU Tabellen mit CSS umstrukturieren

    Hallo, suche nach einer Lösung für mehrere responsive Tabelle mit CSS auf einer Seite.
    Mit einer Tabelle auf der Seite klappt das Script wunderbar. Nun habe ich mehrere Tabellen auf der Seite. Hier bekommen alle Tabellen das data-label der ersten Tabelle der Seite in der mobile Version obwohl ich jeweils in den TDs das data-label der jeweiligen Tabelle gesetzt habe.

    Habt ihr dazu eine Lösung?

    Antworten
    • Thomas
      schrieb am 16.01.2019 um 15:10 Uhr:

      Ich habe es mit einer zusätzlichen Klasse .inhalt für die 2. Tabelle umgesetzt.

      Antworten
      • Jonas Hellwig
        schrieb am 18.01.2019 um 13:13 Uhr:

        Hallo Thomas, du solltest es mit word-break: break-word; auf dem :before-Element auch ohne zusätzliche Klasse lösen können. Ich habe das Beispiel aktualisiert.

  9. Mirco
    schrieb am 29.01.2016 um 12:15 Uhr:

    Hallo, toller Artikel!
    Ich suche nach einer Möglichkeit die oberste Tabellenzeile beim scrollen am oberen Browserfensterrand zu fixieren ohne feste Angaben über die Spaltenbreite machen zu müssen. Hatt da jemand eine Idee oder einen Link?
    Vielen Dank!

    Antworten
  10. Uwe
    schrieb am 06.07.2015 um 00:06 Uhr:

    Tolle Übersicht, hat mit sehr geholfen, vielen Dank!
    Für mich ist die horizontal scrollbare Tabelle optimal.
    Gibt es auch eine Möglichkeit, den Scrollbalken schon am Anfang der Tabelle einzublenden und vielleicht mit einem „Pfeilsymbol“ wie „>>>“ zu versehen? … denn die User sehen erst an Ende der Tabelle, das da ein „dicker Strich / Balken“ ist, aber verstehen vielleicht nicht (direkt), dass man die Tabelle scrollen kann.
    DANKE!
    Uwe

    Antworten
  11. Schwaneberg
    schrieb am 30.07.2013 um 19:08 Uhr:

    Moin Jonas,

    das Beispiel sollte in Deiner Sammlung nicht fehlen:
    http://mobifreaks.com/user-interface/responsive-and-seo-friendly-data-tables/

    LG,

    Norman

    Antworten
  12. Google Maps im Responsive Webdesign | kulturbanause blog
    schrieb am 04.10.2012 um 09:43 Uhr:

    […] auch verschiedene Inhalte sorgen regelmäßig für Unmut. Nachdem ich bereits Lösungen für Tabellen, Bilder und Videos im Responsive Webdesign vorgestellt habe möchte ich nun das Snippet für den […]

    Antworten
  13. Skamander
    schrieb am 26.07.2012 um 22:18 Uhr:

    Ich habe in unserem Firmenintranet viel mit (großen) Tabellen zu tun und löse dies mit folgender Lösung: http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/

    DEMO: http://filamentgroup.com/examples/rwd-table-patterns/

    jQuery-Plugin: https://github.com/thepeg/MediaTable

    Plugin-Demo: http://consulenza-web.com/jquery/MediaTable/

    Ist einfach umzusetzen und gefällt mir bisher ziemlich gut.

    Antworten
  14. Stephan
    schrieb am 01.07.2012 um 20:36 Uhr:

    Hallo,

    finde das Thema Tabellen im Zusammenhang mit Responsive Webdesign wird teilweise sehr häufig vernachlässigt (oder doch sogar vergessen?), deswegen finde ich deinen Überblick über aktuelle Ansätze sehr gut! Ich finde den Ansatz mit dem Dropdown-Menü und dass sich die Besucher selbst die Spalten auswählen können auch relativ gut. In meinem Blog nutze ich jedoch einen rein CSS-basierten Ansatz der sich das data-Attribut zu nutze macht und bin mit der Lösung sehr zufrieden. Letztendlich kommt es wohl aber auch immer auf die jeweilige Tabellenstruktur an, inwieweit welcher Ansatz am besten geeignet ist.

    Gruß Stephan

    Antworten
  15. Pascal
    schrieb am 21.06.2012 um 15:06 Uhr:

    Sehr schöner Artikel! Ein paar interessante Ansätze habe ich auch hier neulich erst gelesen: http://css-tricks.com/responsive-data-tables/ , vielleicht noch eine nette Ergänzung die umstrukturierung der Tabelle in eine Liste.

    Antworten
  16. Oliver
    schrieb am 20.06.2012 um 12:47 Uhr:

    Bei Tabellen in kleinen bzw. beweglichen Bildschirmen kommt man eigentlich kaum um Javascript herum. Ich hab das neulich in einer Chrome Extension fest gestellt, die ich mir zusammen geschrieben habe.

    Interessante Optionen ist dort vor allem eine Möglichkeit zum umsortieren der Daten und die Möglichkeit, den Benutzer auswählen zu lassen, welche Spalten er anzeigen will und als letztes die Möglichkeit die Tabellenbreite zu ändern. Auch wenn ich mir hinterher meine eigene Lösung programmiert habe, hier gibt es diese Funktionen auch als jQuery Plugin http://flexigrid.info/

    Antworten
    • Jonas Hellwig
      schrieb am 20.06.2012 um 13:19 Uhr:

      Hallo Oliver, vielen Dank für diese tolle Ergänzung.
      @Heiko: Das ist wahrscheinlich auch in etwa die Lösung die du in deinem Kommentar erwähnt hattest oder?

      Antworten
  17. Webdesign Coburg
    schrieb am 20.06.2012 um 11:33 Uhr:

    Sehr interessanter Artikel. Da Ich auch schon einige Responsie Webseiten erstellt habe. Aber mit Responsive Design für Tabellen habe Ich mich noch nicht wieder befeasst.
    Ich bevorzuge hier aber auch die Variante mit Javascript und CSS.

    Antworten
  18. Webstandard-Blog
    schrieb am 20.06.2012 um 11:06 Uhr:

    Ich plädiere für linksbündige ausgerichtete Tabellen (Tabellenkopf (th) links, anstatt oben) und die relevanten Spalten (td) können wahlweise über ein Dropdown angezeigt und ausgetauscht werden.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung