Responsive-Tabelle

Tabellen sind nur dann korrekt, wenn es um strukturierte Daten geht. Nicht für Layout. Nicht für Design-Spielereien. Nur wenn Daten logisch in Zeilen & Spalten gehören.

---

Tabellen für tabellarische Darstellungen

• Preislisten (Tarife, Abos)
• Vergleichstabellen (Features A vs. B)
• Stundenpläne / Belegungspläne
• Technische Daten (Specs, Masse, Werte)
• Finanzdaten und Statistiken

Tabellen für kleine Geräte

• Tabellen sind oft breiter als ein Smartphone-Screen
• Das Tabellen-Layout ist nicht so flexibel wie Block-Layouts
• Horizontales Scrollen ist meist schlechte UX

---

Demo

Verkleinere das Browser-Fenster unter 760px oder öffne die Seite auf deinem Smartphone, um die Darstellungsänderung zu sehen.

Eventübersicht 2026

Datum	Event	Location	Tickets
15.03.2026	CSS Grid Workshop	Zürich	45 / 50
22.03.2026	Responsive Design Meetup	Basel	30 / 40
05.04.2026	Animation Masterclass	Bern	Ausverkauft
12.04.2026	Dark Mode Best Practices	Zürich	20 / 30
28.04.2026	CSS Conference 2026	Genf	150 / 200

---

Lösung

Auf kleinen Screens wird jede Tabellenzeile zu einer Card. Die Labels stammen direkt aus dem HTML über data-label. Dadurch bleibt das CSS wartbar – selbst wenn sich die Spaltenreihenfolge ändert.

Kernidee

@media (max-width: 760px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  td::before {
    content: attr(data-label);
  }
}

<td data-label="Datum">

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

CSS greift hier auf den Wert "Datum" zu und verwendet ihn als Inhalt des ::before-Elements.

---

CSS-Mechanik: relative + absolute

td {
  position: relative;   /* definiert den Bezugspunkt */
}
td::before {
  position: absolute;   /* wird innerhalb der td positioniert */
}

position: relative erzeugt einen lokalen Koordinatenraum.
position: absolute platziert das Label exakt innerhalb dieses Raums.
Ohne relative würde sich das Label am nächsten positionierten Vorfahren orientieren – und unkontrolliert wandern.

Live-Demo & editierbarer Code auf CodePen

---

Advanced

Statt @media kann man auch Container Queries verwenden. Dann reagiert die Tabelle nicht auf die Bildschirmbreite, sondern auf den verfügbaren Platz im Layout.

Responsive-Tabelle mit clip
Responsive Tabelle mit Container Queries

---