CSS-Kurs / Tabellen: Rahmen, Spaltenbreiten und table-layout

Das CSS-Tabellenlayout verteilt den Spaltenraum nach den Gestaltungsregeln und dem Inhalt der Tabelle. table-layout: auto berücksichtigt den Zellinhalt, während ein festes Layout die Spaltengröße vorhersagbarer machen kann, wenn die Tabelle eine explizite Breite hat.

Trennen Sie Tabellenbreite und Zell-Padding

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

th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }

width: 100% weist die Tabelle an, ihre Größe basierend auf der Breite ihres übergeordneten Elements anzupassen. padding bestimmt den Innenabstand der Zelle, border ihren Rahmen. border-collapse: collapse führt die Rahmen benachbarter Zellen zusammen. Die Festlegung der Tabellenbreite und das Setzen von Zeilenumbrüchen im Inhalt sind getrennt.

Eine Tabelle mit width: 100% passt nicht immer in ihr übergeordnetes Element. Nicht umbrechbarer Inhalt oder eine große Mindestbreite können dazu führen, dass die tatsächliche Tabelle oder Zellinhalte breiter sind. Bei typischen Datentabellen ist es sicher, die Zellhöhen wachsen zu lassen, um der Satzlänge zu entsprechen. Wenn Sie eine feste Höhe vorgeben, müssen Sie auf Abschneidung prüfen, wenn der Text vergrößert oder Inhalte hinzugefügt werden.

Spalten entsprechend ihrem Inhalt zuweisen

<colgroup>
  <col style="width: 30%;">
  <col style="width: 70%;">
</colgroup>

Die Übung teilt den kurzen Artikelnamen und die lange Beschreibung in zwei Spalten auf. Das Verhältnis 30:70 reserviert mehr Platz für die längere Beschreibung. Wenn die tatsächlichen Daten aus Datumsangaben, Preisen, langen Beschreibungen usw. bestehen, verteilen Sie sie entsprechend der Rolle jeder Spalte. Wenn die standardmäßige automatische Platzierung ausreichend lesbar ist, besteht keine Notwendigkeit, das Verhältnis zu erzwingen.

Wenn Sie einen Prozentsatz der gesamten Spalte angeben, wie hier gezeigt, setzen Sie die Summe auf 100%. Betrachten Sie die colgroup-Breitenangabe nicht als endgültiges Ergebnis, das unter allen Umständen durchgesetzt wird. Das automatische Layout arbeitet zusammen mit der Mindestgröße des Inhalts und Tabellenberechnungen. Bitte beziehen Sie sich auf die colgroup-Beschreibung in MDN.

Vergleichen Sie automatisches und festes Layout

Ein festes Tabellenlayout erfordert eine angegebene Tabellenbreite; width: auto erzeugt nicht die beabsichtigte feste Berechnung. Hier verwenden beide Tabellen width: 100% und dieselbe Spaltengruppe, sie unterscheiden sich nur in table-layout. Wenn ein Zelltext abgeschnitten wird, überprüfen Sie die Umbruch- und Ellipsenbedingungen separat. Siehe MDN: Tabellenlayout, Überlauf, lange Zeichenfolgen und Auslassungszeichen.

Die folgenden Daten enthalten lange Reservierungscodes, die wir ohne Zeilenumbruch anzeigen möchten. Das vollständige Beispiel wendet nowrap·hidden·ellipsis auf diese Zelle identisch auf beide Tabellen an. Automatisches Layout kann erweitert werden, um den Platz für lange Werte widerzuspiegeln, und festes Layout kann innerhalb einer gegebenen Spalte verkürzt werden. Der Originaltext wird in einem separaten Absatz vollständig bereitgestellt, sodass Sie den abgeschnittenen Code ebenfalls überprüfen können.

Scrollen Sie den Tabellenbereich auf schmalen Bildschirmen

.table-scroll { overflow-x: auto; }

table { width: 100%; min-width: 32rem; }

Wenn Ihre Basis-Schriftgröße 16px beträgt, dann sind 32rem 512px. Wenn die verfügbare Breite auf dem Bildschirm kleiner ist, behält die Tabelle ihre Mindestbreite bei und nur der übergeordnete Bereich wird horizontal scrollbar. Dies muss von einem horizontalen Verschieben der gesamten Seite unterschieden werden. Die 32rem in der Übung dienen nur zum Vergleich dieser beiden Spalten und sind nicht als Mindestbreite für alle Tabellen gedacht. Prüfen Sie auf kleinen Bildschirmen, ob die Tabelle vollständig erreichbar und bedienbar bleibt. Nutzen Sie die Prüfpunkte aus Responsive CSS mit Breite, Zoom und Tastatur prüfen.

Wenn Ihre Tabelle klein und dennoch lesbar ist, können Sie die Mindestbreite verringern oder entfernen. Umgekehrt kann das Komprimieren mehrerer Spalten und langer Werte sie schwer lesbar machen. Bestimmen Sie anhand der tatsächlichen Daten, ob semantische Spalten verkürzt werden können, durch Zeilenumbrüche aufgelöst werden oder horizontale Bewegungen erforderlich sind. Auf Mobilgeräten können Anweisungen wie „Sie können horizontal verschieben“ hilfreich sein.

Der scrollbare Wrapper hat tabindex="0", role="region", einen beschreibenden zugänglichen Namen und eine sichtbare Fokusmarkierung. Navigieren Sie mit Tab dahin und verwenden Sie die Pfeiltasten, um die letzte Spalte zu erreichen. Eine Tabelle, die kein Scrollen benötigt, braucht nicht automatisch einen zusätzlichen Tab-Stopp. Siehe MDN: overflow.

Führen Sie den vollständigen Tabellenvergleich durch

Speichern Sie den untenstehenden Code und öffnen Sie ihn als UTF-8 in tables.html. Er verwendet dieselben drei Zeilen und dasselbe 30:70-Spaltenverhältnis, sodass Sie die Unterschiede zwischen den Layouts vergleichen können. Der Reservierungscode ist ein fiktiver Wert zum Üben des Layouts.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Table sizes and long content</title>
  <style>
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .table-scroll { max-width: 640px; overflow-x: auto; margin-block: 16px; }
    .table-scroll:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    table { width: 100%; min-width: 32rem; border-collapse: collapse; }
    th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }
    .auto { table-layout: auto; }
    .fixed { table-layout: fixed; }
    .token { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .original { max-width: 640px; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Automatic and fixed table layout</h1>
  <h2>table-layout: auto</h2>
  <div class="table-scroll" role="region" aria-label="Auto Batch Comparison Table" tabindex="0"><table class="auto"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <h2>table-layout: fixed</h2>
  <div class="table-scroll" role="region" aria-label="Fixed batch comparison table" tabindex="0"><table class="fixed"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <p class="original">Full reservation code: GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>

1. Verkleinern Sie das Fenster und überprüfen Sie die Breite beider Tabellen. Feste Tabellen sind mindestens 512px breit bei einer Basis von 16px, und automatische Tabellen können breiter sein, um längeren Code widerzuspiegeln. Beide Tabellen sollten sich innerhalb ihres umgebenden Scrollbereichs, horizontal bewegen und nicht über die gesamte Seite.
2. Wechseln Sie mit Tab zum Scrollbereich der fixed-Tabelle und überprüfen Sie die letzte Spalte mit der rechten Pfeiltaste. Auf kleinen Bildschirmen prüfen Sie auch, ob Sie horizontal mit dem Finger scrollen können. Scrollen Sie nach dem Vergleich wieder ganz nach links.
3. Ändern Sie table-layout in .fixed zu auto. Nachdem Sie überprüft haben, wie sich die Spalten- und Tabellenbreite bei denselben Daten ändert, stellen Sie sie wieder auf fixed zurück.
4. Ändern Sie das white-space von .token zu normal und fügen Sie overflow-wrap: anywhere hinzu. Überprüfen Sie, ob der lange Code umbricht, um die Zellhöhe zu erhöhen, und setzen Sie dann die ursprüngliche Deklaration wieder ein.
5. Ändern Sie das Spaltenverhältnis auf 40:60. Vergleichen Sie den Abstand in der Spalte für kurze Einträge mit den Zeilenumbrüchen in der Spalte für die Beschreibung. Stellen Sie es wieder auf das ursprüngliche 30:70 zurück und überprüfen Sie es auf einem breiten Bildschirm und bei vergrößertem Text.

Wenn die Proportionen nicht wie erwartet aussehen, prüfen Sie das Tabellenlayout sowie die angegebene Tabellenbreite, Mindestbreite und die Umbruchbedingungen für lange Zeichenketten. Wenn horizontales Verschieben nicht funktioniert, stellen Sie sicher, dass Sie overflow-x am umgebenden Wrapper und nicht an der Tabelle selbst angeben. Wenn Sie sich entscheiden, Wörter abzukürzen, sollten Sie in der Lage sein, wichtigen ursprünglichen Text an anderer Stelle zu lesen.