Tabellen-Styling

Zuletzt aktualisiert am 15. Februar 2026

CSS bietet mehrere Eigenschaften, die speziell für HTML-Tabellen gelten. table-layout steuert, wie der Browser Spaltenbreiten berechnet. border-collapse bestimmt, ob Zellrahmen zusammenfallen oder getrennt bleiben. border-spacing definiert den Abstand zwischen den Zellen. caption-side positioniert die Tabellenüberschrift. Und empty-cells entscheidet, ob leere Zellen ihren Rahmen und Hintergrund zeigen. Zusammen ermöglichen diese Eigenschaften saubere, moderne Tabellen-Designs.

Grundlagen

Tabellen haben in CSS besondere Eigenschaften, die auf anderen Elementen nicht funktionieren. Die wichtigsten betreffen das Rahmenverhalten und die Spaltenbreiten-Berechnung.

border-collapse: collapse ist die meistgenutzte Tabellen-Eigenschaft. Im Standard (separate) hat jede Zelle ihren eigenen Rahmen, was zu doppelten Linien zwischen Zellen führt. Mit collapse verschmelzen benachbarte Rahmen zu einer einzigen Linie. Das sieht in fast allen Fällen besser aus.

table-layout beeinflusst die Performance und Berechenbarkeit von Tabellen. Bei auto (Standard) berechnet der Browser die Spaltenbreiten anhand des gesamten Zellinhalts, was bei großen Tabellen langsam sein kann. Bei fixed richtet sich die Spaltenbreite nur nach der ersten Zeile und den gesetzten width-Werten, was schneller und vorhersehbarer ist.

Syntax & Werte

table-layout

border-collapse

border-spacing

caption-side

empty-cells

Beispiele

border-collapse vs. separate

Der Unterschied zwischen collapse und separate ist besonders bei sichtbaren Rahmen deutlich: Bei separate entstehen doppelte Linien zwischen den Zellen.

/* Doppelte Rahmen (Standard) */
table { border-collapse: separate; }

/* Zusammengefallene Rahmen (empfohlen) */
table { border-collapse: collapse; }

<div class="bc-demo">
<div>
  <h4>separate (Standard)</h4>
  <table class="t-separate">
    <tr><th>Name</th><th>Rolle</th></tr>
    <tr><td>Anna</td><td>Frontend</td></tr>
    <tr><td>Ben</td><td>Backend</td></tr>
    <tr><td>Clara</td><td>Design</td></tr>
  </table>
</div>
<div>
  <h4>collapse</h4>
  <table class="t-collapse">
    <tr><th>Name</th><th>Rolle</th></tr>
    <tr><td>Anna</td><td>Frontend</td></tr>
    <tr><td>Ben</td><td>Backend</td></tr>
    <tr><td>Clara</td><td>Design</td></tr>
  </table>
</div>
</div>

table-layout: fixed vs. auto

Bei auto passt der Browser die Spaltenbreiten an den Inhalt an. Bei fixed richtet er sich nach den gesetzten Breiten und der ersten Zeile. Langer Inhalt wird abgeschnitten oder umbrochen.

/* Browser berechnet Breiten (Standard) */
table { table-layout: auto; }

/* Feste Spaltenbreiten, schneller */
table {
  table-layout: fixed;
  width: 100%;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="tl-demo">
<div>
  <h4>auto (Standard)</h4>
  <table class="t-auto">
    <tr><th>ID</th><th>Name</th><th>Beschreibung</th></tr>
    <tr><td>1</td><td>A</td><td>Eine sehr lange Beschreibung, die den Spaltenbreiten-Algorithmus beeinflusst</td></tr>
    <tr><td>2</td><td>B</td><td>Kurz</td></tr>
  </table>
</div>
<div>
  <h4>fixed (gleichmäßige Spalten)</h4>
  <table class="t-fixed">
    <tr><th>ID</th><th>Name</th><th>Beschreibung</th></tr>
    <tr><td>1</td><td>A</td><td>Eine sehr lange Beschreibung, die bei fixed abgeschnitten wird</td></tr>
    <tr><td>2</td><td>B</td><td>Kurz</td></tr>
  </table>
</div>
</div>

Modernes Tabellen-Design

Zebra-Streifen mit nth-child, Header-Styling und Hover-Effekt: ein typisches modernes Tabellen-Design.

table {
  border-collapse: collapse;
  width: 100%;
}

thead th {
  background: #1e293b;
  color: #f8fafc;
  padding: 10px 14px;
}

/* Zebra-Streifen */
tbody tr:nth-child(even) {
  background: #f8fafc;
}

/* Hover-Effekt */
tbody tr:hover {
  background: #e0f2fe;
}

<div class="modern-demo">
<table>
  <thead>
    <tr><th>Name</th><th>E-Mail</th><th>Rolle</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Anna Müller</td><td>anna@beispiel.de</td><td>Frontend</td><td><span class="status active">Aktiv</span></td></tr>
    <tr><td>Ben Schmidt</td><td>ben@beispiel.de</td><td>Backend</td><td><span class="status active">Aktiv</span></td></tr>
    <tr><td>Clara Weber</td><td>clara@beispiel.de</td><td>Design</td><td><span class="status pending">Ausstehend</span></td></tr>
    <tr><td>David Koch</td><td>david@beispiel.de</td><td>DevOps</td><td><span class="status inactive">Inaktiv</span></td></tr>
    <tr><td>Eva Fischer</td><td>eva@beispiel.de</td><td>QA</td><td><span class="status active">Aktiv</span></td></tr>
  </tbody>
</table>
</div>

caption-side und empty-cells

caption-side: bottom positioniert die Tabellenüberschrift unter der Tabelle. empty-cells: hide versteckt leere Zellen (nur bei border-collapse: separate).

/* Überschrift unter der Tabelle */
table { caption-side: bottom; }

/* Leere Zellen verstecken */
table {
  border-collapse: separate;
  empty-cells: hide;
}

<div class="cap-demo">
<div>
  <h4>caption-side: bottom</h4>
  <table class="cap-bottom">
    <caption>Quartalsergebnisse 2026</caption>
    <tr><th>Q1</th><th>Q2</th></tr>
    <tr><td>12.500</td><td>14.200</td></tr>
  </table>
</div>
<div>
  <h4>empty-cells: hide</h4>
  <table class="ec-demo">
    <tr><th>Mo</th><th>Di</th><th>Mi</th></tr>
    <tr><td>09:00</td><td></td><td>14:00</td></tr>
    <tr><td></td><td>10:30</td><td></td></tr>
  </table>
</div>
</div>

Responsive Tabelle

Tabellen sind auf kleinen Bildschirmen problematisch, weil sie eine Mindestbreite brauchen. Die einfachste Lösung: Ein Wrapper mit overflow-x: auto, damit die Tabelle horizontal scrollbar wird.

/* Wrapper für horizontales Scrollen */
.table-wrapper {
  overflow-x: auto;
}

table {
  min-width: 500px; /* Mindestbreite */
  width: 100%;
  border-collapse: collapse;
}

th, td {
  white-space: nowrap; /* Kein Zeilenumbruch */
  padding: 8px 12px;
}

<div class="resp-demo">
<div class="table-wrapper">
  <table>
    <thead>
      <tr><th>Produkt</th><th>Kategorie</th><th>Preis</th><th>Lager</th><th>Status</th><th>Letzte Änderung</th></tr>
    </thead>
    <tbody>
      <tr><td>Widget Pro</td><td>Software</td><td>29,99 €</td><td>∞</td><td>Aktiv</td><td>12.02.2026</td></tr>
      <tr><td>Gadget Mini</td><td>Hardware</td><td>149,00 €</td><td>42</td><td>Aktiv</td><td>10.02.2026</td></tr>
      <tr><td>Service Plus</td><td>Dienstleistung</td><td>99,00 €/Monat</td><td>-</td><td>Ausstehend</td><td>08.02.2026</td></tr>
    </tbody>
  </table>
</div>
<div class="scroll-hint">← Horizontal scrollen →</div>
</div>

Barrierefreiheit

Verwende immer ein <caption>-Element für Tabellen. Es ist der zugänglichste Weg, den Zweck einer Tabelle zu beschreiben. Screenreader lesen die Caption vor, bevor sie den Tabelleninhalt präsentieren, sodass Nutzer sofort wissen, was sie erwartet. caption-side ändert nur die visuelle Position, nicht die semantische Rolle.

empty-cells: hide kann Screenreader-Nutzer verwirren, weil die Zelle visuell verschwindet, aber im DOM und für Screenreader noch vorhanden ist. Das kann zu einer Diskrepanz zwischen visueller und akustischer Darstellung führen. Wenn eine Zelle leer ist, überlege, ob ein Platzhaltertext wie ”-” oder “Keine Daten” semantisch sinnvoller wäre.

Tabellen-Header (<th>) brauchen ein scope-Attribut (col oder row), damit Screenreader die Beziehung zwischen Header und Datenzellen korrekt zuordnen können. Bei Zebra-Streifen mit nth-child sollte der Kontrastunterschied zwischen den Zeilen nicht zu subtil sein: mindestens ein Kontrastverhältnis von 3:1 zwischen Textfarbe und beiden Hintergrundfarben ist empfehlenswert.

Häufige Fehler

• border-spacing bei border-collapse: collapse setzen: border-spacing wird bei collapse komplett ignoriert. Die Eigenschaft wirkt nur bei separate. Wenn du Abstände zwischen Zellen bei collapse brauchst, verwende padding auf den Zellen.
• table-layout: fixed ohne width auf der Tabelle: Ohne eine definierte Breite hat fixed keinen Effekt, weil der Browser keine Basis für die Spaltenberechnung hat. Setze immer width: 100% zusammen mit table-layout: fixed.
• Doppelte Rahmen bei border-collapse: separate: Wenn jede Zelle einen Rahmen hat, entstehen zwischen benachbarten Zellen doppelte Linien. Die Lösung ist fast immer border-collapse: collapse.
• Tabellen für Layout verwenden: HTML-Tabellen sind für tabellarische Daten gedacht, nicht für Seitenlayouts. Verwende Flexbox oder Grid für Layout-Zwecke. Tabellen-Layouts sind nicht responsive und schlecht für die Barrierefreiheit.
• Responsive Design vergessen: Tabellen mit fester Breite sprengen auf kleinen Bildschirmen das Layout. Verwende immer einen Wrapper mit overflow-x: auto oder ein alternatives Layout für mobile Ansichten.

Browser-Kompatibilität

Alle Tabellen-Eigenschaften (table-layout, border-collapse, border-spacing, caption-side, empty-cells) werden seit über 20 Jahren von allen Browsern vollständig unterstützt.

Email-Kompatibilität

Tabellen sind das Grundgerüst des Email-Layouts. Die meisten Tabellen-Eigenschaften funktionieren gut, mit Einschränkungen in Outlook.

Verwandte Eigenschaften