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 im Web

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

Die erste Variante ergänzt clip-path für das visuelle Verstecken des Tabellenkopfs. Die zweite verwendet Container Queries und reagiert damit auf den verfügbaren Platz im Layout statt auf die Breite des Viewports.

Responsive Tabelle mit clip-path
Responsive Tabelle mit Container Queries

---