Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » Tabellen responsiv gestalten – mit CSS, ohne JavaScript

Tabellen responsiv gestalten – mit CSS, ohne JavaScript

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 5 Kommentare
Lesedauer: 5 Minuten
  • von Denis Potschien
  • 17. Februar 2016

Inhaltsverzeichnis

Responsives Webdesign ist längst zu einem festen Bestandteil der Webentwicklung geworden. Die zunehmende mobile Internetnutzung macht es erforderlich, dass jede Website auch auf kleinen Displays zu erkennen ist. Das stellt Webdesigner und -entwickler immer wieder vor Herausforderungen. Wo bringe ich die komplexe Navigation unter? Wie stelle ich Fotos und Grafiken zur Verfügung? Was mache ich mit breiten, vielspaltigen Tabellen? Auf letztere Frage gibt es gleich mehrere mögliche Antworten. Denn die eine, immer richtige Lösung für Tabellen gibt es nicht.

Tabellen responsiv gestalten – mit CSS, ohne JavaScript

Tabellen scrollbar machen

Eine recht einfache Möglichkeit, ist es, Tabellen einfach vertikal scrollbar zu machen. Hierbei bleibt die Tabelle in ihrer Breite unverändert. Mit etwas CSS wird lediglich dafür gesorgt, dass die Tabelle nicht die Breite des Layouts sprengt, sondern der sichtbare Bereich auf die Display- beziehungsweise Layoutbreite beschnitten wird. Mit dem Finger kannst du die Tabelle allerdings nach links und rechts verschieben.

table {
  display: block;
  overflow: scroll;
}

Um eine Tabelle scrollbar zu machen, bedarf es lediglich zweier CSS-Eigenschaften. Zum einen muss aus der Tabelle ein Blockelement werden – per „display“. Zum anderen muss per „overflow“ dafür gesorgt werden, dass alles, was über die Breite des Weblayouts hinaus geht, nicht dargestellt wird. Dieser Bereich ist dann aber per vertikalem Scrollen erreichbar.

css-tabellen-responsiv_scrollbar
Scrollbare Tabelle

Zusätzlich sollte man den Tabellenspalten entweder feste Breiten zuweisen oder per „white-space“ verhindern, dass ein automatischer Umbruch erfolgt.

table th, table td {
  white-space: nowrap;
}

Andernfalls wird die Tabelle immer auf die Breite des Weblayouts zurechtgestutzt, was zu unschönen und vor allem vielen Zeilenumbrüchen führt.

Tabellenspalten untereinander darstellen

Die erste Variante hat zwar den Vorteil, dass sie einfach umzusetzen ist und du immer eine Spalte der Tabelle komplett im sichtbaren Bereich hast. Je nach dargestellten Daten ist es jedoch sinnvoller, immer den Inhalt einer Zeile komplett sichtbar zu haben. Auch hierfür gibt es eine Lösung, die etwas umständlicher ist, aber ebenfalls ohne JavaScript auskommt.

Die zweite Variante wird eine Tabelle komplett aufbrechen und jede Zeile mit den entsprechenden Spaltenbezeichnungen als Block untereinander darstellen. Hierfür ist es zunächst notwendig, dass per Data-Attribut die Spaltenbezeichnungen jeder Zelle einer Zeile hinzugefügt werden.

<table>
  <tr>
    <th>Name</th>
    <th>Straße</th>
    …
  </tr>
  <tr>
    <td data-th="Name">Manfred Mustermann</td>
    <td data-th="Straße">Musterstraße 1</td>
    …
  </tr>
  …

Im Beispiel wird also der ersten Zelle einer Zeile per „data-th“ die Bezeichnung der ersten Spalte zugewiesen, der zweiten Zelle die Bezeichnung der zweiten Spalte. Dies muss für alle Zeilen der Tabellen wiederholt werden.

css-tabellen-responsiv_untereinander
Untereinander dargestellte Tabellenzeilen

Anschließend müssen die Zeilen und Zellen als Blockelemente dargestellt werden und die Kopfzeile darf nicht mehr sichtbar sein.

table td, table tr {
  display: block;
}
table th {
  display: none;
}

Danach setzt du das Pseudoelement „::before“ ein, um den Wert des Attributes „data-th“ vor jeden Zelleninhalt zu platzieren.

table td::before {
  content: attr(data-th)":";
  display: inline-block;
  font-weight: bold;
  margin-right: 0.25em;
}

Per „content“ wird dem Pseudoelement der Wert des Data-Attributes sowie ein Doppelpunkt zugewiesen. Das Ganze stellst du dann noch als Inline-Block-Element dar.

Die ganzen CSS-Definitionen solltest du zudem innerhalb eines Media-Queries-Bereichs platzieren, so dass sie nur für bestimmte Auflösungen ausgegeben werden. Diese zweite Lösung funktioniert in allen modernen Browsern. Nur der Internet Explorer 9 und ältere Versionen haben so ihre Probleme damit.

Fazit und Beispiele

Beide Lösungen haben ihre Berechtigung. Die erste sorgt für eine gute Übersicht, wenn es darum geht, einzelne Spalten darzustellen. Die zweite Lösung ist optimal, wenn es wichtig ist, den Inhalt einzelner Zeilen im Blick zu haben.

  • Responsive Tabellen zum Scrollen (Beispiel auf Codepen)
  • Responsive Tabellen als Absatz (Beispiel auf Codepen)

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

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.

responsive tables header Tabellen responsiv gestalten – mit CSS, ohne JavaScript

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:

responsive table schematic Tabellen responsiv gestalten – mit CSS, ohne JavaScript

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.

responsive tables normal Tabellen responsiv gestalten – mit CSS, ohne JavaScript Die Tabelle bei normaler Auflösung… responsive tables small device Tabellen responsiv gestalten – mit CSS, ohne JavaScript … 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.

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

 …

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

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Andrea Becker Design Logo.

design andrea becker

Frankfurt am Main

Coco logo.

COCO Content Marketing

München

360 grad konzept logo werbeagentur hannover.

Werbeagentur Hannover | 360 Grad Konzept

Hannover

Zwei N als Logo für die Niel Neumann Online Marketing Agentur.

Niels Neumann Online Marketing

Limburgerhof

Agentur novomyo Logo.

novomyo – Online Marketing Agentur

Hamburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

5 Antworten zu „Tabellen responsiv gestalten – mit CSS, ohne JavaScript“
— was ist Deine Meinung?

  1. Karl Marx sagt:
    17. Februar 2016 um 14:18 Uhr

    Wenn Ihr keine (Live-) Beispiele geben wollt, lasst die Artikel doch gleich sein!
    Wenn Ihr Euch nicht die Mühe machen wollt, 1 Minute zu Investieren, lasst es!
    Ihr reiht Euch wunderbar bei heise, t3n und co ein. Nicht mehr lesenswert.
    RIP

    Antworten
    1. Denis Potschien sagt:
      17. Februar 2016 um 14:26 Uhr

      Am Ende des Artikels sind unter „Fazit und Beispiele“ zwei Links zu Live-Beispielen auf CodePen.

      Antworten
    2. Tom Schreter sagt:
      18. Februar 2016 um 13:50 Uhr

      Selbst wenn es hier kein Live Beispiel gegeben hätte, wäre das aufgrund der veranschaulichenden Screenshots nur halb so schlimm, wie hier angeprangert wird.

      Gutes Timing mit dem Post! Ich ab gerade nach einer Implementierung von scrollbaren Tabellen wie auf Wikipedia gesucht. Danke!

      Antworten
    3. Dieter Petereit sagt:
      19. Februar 2016 um 8:21 Uhr

      Ich wiederhole mich da gerne. Wenn du unsere Beiträge nicht lesen möchtest, dann lass es.

      Antworten
    4. Michael Dobler sagt:
      28. Februar 2016 um 11:40 Uhr

      RIP? Ich dachte immer, Karl Max würde nicht mehr unter uns weilen.

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑