table-layout

Die Eigenschaft table-layout bestimmt, welchen Algorithmus der Browser zum Anordnen von Tabellenzeilen, Zellen und Spalten verwenden soll.

table {
  table-layout: fixed;
}

Wie in der CSS2.1-Spezifikation erklärt wird, ist das Tabellenlayout im Allgemeinen Geschmackssache und variiert je nach Designentscheidungen. Browser wenden jedoch automatisch bestimmte Einschränkungen an, die bestimmen, wie Tabellen angeordnet werden. Dies geschieht, wenn die Eigenschaft table-layout auf auto (dem Standardwert) gesetzt ist. Diese Einschränkungen können jedoch aufgehoben werden, wenn table-layout auf fixed gesetzt wird.

Werte

• auto: der Standardwert. Der automatische Algorithmus des Browsers wird verwendet, um zu definieren, wie die Zeilen, Zellen und Spalten einer Tabelle angeordnet werden. Das resultierende Tabellenlayout hängt im Allgemeinen vom Inhalt der Tabelle ab.
• fixed: Mit diesem Wert ignoriert das Layout der Tabelle den Inhalt und verwendet stattdessen die Tabellenbreite, die angegebene Breite von Spalten sowie Rahmen- und Zellabstandswerte. Die verwendeten Spaltenwerte basieren auf den Breiten, die in der ersten Tabellenzeile für Spalten oder Zellen definiert sind.
• inherit: gibt an, dass der Wert vom table-layout-Wert seines Elternelements geerbt wird

Damit ein Wert von fixed Wirkung zeigt, muss die Breite der Tabelle auf etwas anderes als auto (der Standardwert für die width-Eigenschaft) gesetzt sein. In den folgenden Demos sind alle Tabellenbreiten auf 100 % gesetzt, was bedeutet, dass die Tabelle ihren übergeordneten Container horizontal ausfüllen soll.

Der beste Weg, die Auswirkungen eines festen Tabellenlayout-Algorithmus zu sehen, ist die Verwendung einer Demo.

Siehe den Pen Demo für die CSS-Eigenschaft table-layout von Louis Lazaris (@impressivewebs) auf CodePen.

Wenn Sie die obige Demo zum ersten Mal betrachten, werden Sie feststellen, dass das Layout der Tabellenspalten unausgewogen und ungeschickt ist. Zu diesem Zeitpunkt verwendet die Tabelle den Standardalgorithmus des Browsers, um zu definieren, wie das Layout erstellt wird, was bedeutet, dass der Inhalt das Layout bestimmt. Die Demo übertreibt diese Tatsache, indem sie eine lange Textzeichenkette in einer Tabellenzelle enthält, während alle anderen Tabellenzellen nur zwei Wörter enthalten. Wie Sie sehen können, erweitert der Browser die erste Spalte, um den größeren Inhalt aufzunehmen.

Wenn Sie auf die Schaltfläche „Toggle table-layout: fixed“ klicken, sehen Sie, wie das Tabellenlayout aussieht, wenn der „fixed“-Algorithmus verwendet wird. Wenn table-layout: fixed angewendet wird, bestimmt der Inhalt nicht mehr das Layout, sondern der Browser verwendet die definierten Breiten aus der ersten Zeile der Tabelle, um die Spaltenbreiten zu definieren. Wenn in der ersten Zeile keine Breiten angegeben sind, werden die Spaltenbreiten unabhängig vom Inhalt der Zellen gleichmäßig über die Tabelle verteilt.

Weitere Beispiele können dies verdeutlichen. In der folgenden Demo hat die Tabelle ein <colgroup>-Element, dessen erstes <col>-Element eine Breite von 400px hat. Beachten Sie, dass in diesem Fall das Umschalten von table-layout: fixed keine Auswirkung hat.

Siehe den Pen Demo für die CSS-Eigenschaft table-layout von Louis Lazaris (@impressivewebs) auf CodePen.

Dies geschieht, weil der Standard-Layout-Algorithmus im Wesentlichen besagt: „Machen Sie die erste Spalte 400 Pixel breit und verteilen Sie die restlichen Spalten basierend auf ihrem Inhalt.“ Da die anderen drei Spalten den gleichen Inhalt haben, wird keine Änderung vorgenommen. Aber jetzt fügen wir einer der anderen Spalten etwas zusätzlichen Textinhalt hinzu

Siehe den Pen Demo für die CSS-Eigenschaft table-layout mit Spaltenbreite und variablem Inhalt von Louis Lazaris (@impressivewebs) auf CodePen.

Wenn Sie nun auf die Umschaltfläche klicken, sehen Sie, wie sich die Spalten an ein festes Layout anpassen, unabhängig vom Inhalt. Wiederum geschieht dasselbe; die erste Spalte ist auf 400 Pixel eingestellt, und die restlichen Spalten werden gleichmäßig verteilt. Diesmal ist der Unterschied jedoch spürbar, da eine der Spalten zusätzlichen Inhalt hat.

Wie ein fester Layout-Algorithmus Spaltenbreiten bestimmt

Die folgenden beiden Demos sollen verdeutlichen, dass die erste Zeile der Tabelle die Spaltenbreiten einer Tabelle mit table-layout: fixed bestimmt.

Siehe den Pen Demo für CSS’s table-layout mit Zelle in Zeile 1 mit definierter Breite von Louis Lazaris (@impressivewebs) auf CodePen.

In der obigen Demo hat die erste Zelle der ersten Tabellenzeile eine Breite von 350px. Das Umschalten von table-layout: fixed passt die anderen Spalten an, aber die erste bleibt gleich. Versuchen Sie nun die folgende Demo

Siehe den Pen Demo für CSS’s table-layout mit Zelle in Zeile 2 mit definierter Breite von Louis Lazaris (@impressivewebs) auf CodePen.

In diesem Fall hat die zweite Zeile eine Breite, die ihrer ersten Tabellenzelle zugeordnet ist. Wenn nun die Umschaltfläche angeklickt wird, werden alle Spaltenbreiten angepasst. Auch hier liegt das daran, dass der Algorithmus für festes Layout die erste Zeile zur Bestimmung der Spaltenbreiten verwendet und das Endergebnis darin besteht, die Breiten gleichmäßig zu verteilen.

Vorteile eines festen Layout-Algorithmus

Die ästhetischen Vorteile der Verwendung von table-layout: fixed sollten aus den obigen Demonstrationen klar sein. Aber der andere große Vorteil ist die Leistung. Die Spezifikation bezeichnet den festen Algorithmus als „schnellen“ Algorithmus, und das aus gutem Grund. Der Browser muss nicht den gesamten Inhalt der Tabelle analysieren, bevor er die Größe der Spalten bestimmt; er muss nur die erste Zeile analysieren. Das Ergebnis ist eine schnellere Verarbeitung des Tabellenlayouts.

Verwandte Eigenschaften

• display
• empty-cells

Weitere Informationen

• Feste Tabellenlayouts
• Festes Tabellenlayout in der CSS2.1-Spezifikation
• Die Eigenschaft table-layout in CSS Table Module Level 3

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
1+	1+	1+	7+	5+	2.1+	3+