Tabellen-Styling

/* 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>

/* 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>

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>

/* Ü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>

/* 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>