Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » Tabellen responsiv gestalten – mit CSS, ohne JavaScript

Tabellen responsiv gestalten – mit CSS, ohne JavaScript

  • Aktualisiert am 5. April 2023
  • von Denis Potschien
  • Webdesign
  • 5 Kommentare

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

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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

Inhaltsverzeichnis

Agenturpartner in Hamburg

Edit Content

TIKAL Communication

TIKAL ist präventiv aktiv. Das bedeutet: Wir denken mit und sorgen vor, anstatt nur Aufgaben abzuarbeiten. Dafür machen wir uns im Detail mit Ihrem Business vertraut. So wissen wir genau, wann Ihr Shop fest im E-Commerce verankert ist. Das erspart Ihnen viele Probleme und Verzögerungen, die Sie Geld und Nerven kosten können.

— Stefan Quisdorf,
Gründer und Geschäftsführer
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

5 Antworten

  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.

    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!

    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.

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

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

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

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

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration