Tabellenlayout - CSS-Tricks | CSS-Almanach 2025

Die table-layoutEigenschaft definiert, welchen Algorithmus der Browser zum Anordnen von Tabellenzeilen, -zellen und -spalten verwenden soll.

table ( table-layout: fixed; )

Wie in der CSS2.1-Spezifikation erläutert, ist das Tabellenlayout im Allgemeinen Geschmackssache und variiert je nach Designauswahl. Browser wenden jedoch automatisch bestimmte Einschränkungen an, die definieren, wie Tabellen angelegt werden. Dies geschieht, wenn die table-layoutEigenschaft auf auto(Standardeinstellung) festgelegt ist. Diese Einschränkungen können jedoch aufgehoben werden, wenn sie auf table-layouteingestellt sind fixed.

Werte

auto: der Standard. Der automatische Algorithmus des Browsers definiert, wie die Zeilen, Zellen und Spalten einer Tabelle angeordnet sind. Das resultierende Tabellenlayout hängt im Allgemeinen vom Inhalt der Tabelle ab.
fixed: Bei diesem Wert ignoriert das Tabellenlayout den Inhalt und verwendet stattdessen die Tabellenbreite, eine beliebige angegebene Spaltenbreite sowie Werte für Rahmen- und Zellenabstände. Die verwendeten Spaltenwerte basieren auf Breiten, die in Spalten oder Zellen für die erste Zeile der Tabelle definiert sind.
inherit: Gibt an, dass der Wert vom table-layoutWert des übergeordneten Elements geerbt wird

Damit ein Wert von fixedeine Auswirkung hat, muss die Breite der Tabelle auf etwas anderes als auto(die Standardeinstellung für die widthEigenschaft) festgelegt werden. In den folgenden Demos sind alle Tabellenbreiten auf 100% festgelegt. Dies setzt voraus, dass die Tabelle ihren übergeordneten Container horizontal füllt.

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

In der Pen Demo finden Sie die CSS-Eigenschaft für das Tabellenlayout von Louis Lazaris (@impressivewebs) auf CodePen.

Wenn Sie die obige Demo zum ersten Mal anzeigen, werden Sie feststellen, dass das Layout der Tabellenspalten unausgeglichen und umständlich ist. Zu diesem Zeitpunkt verwendet die Tabelle den Standardalgorithmus des Browsers, um zu definieren, wie die Tabelle angeordnet werden soll. Dies bedeutet, dass der Inhalt das Layout bestimmt. Die Demo übertreibt diese Tatsache, indem sie eine lange Textfolge in eine Tabellenzelle einfügt, während alle anderen Tabellenzellen jeweils nur zwei Wörter verwenden. Wie Sie sehen können, erweitert der Browser die erste Spalte, um den größeren Inhalt aufzunehmen.

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

Weitere Beispiele können helfen, dies klarer zu machen. In der folgenden Demo enthält die Tabelle ein Element, dessen erstes Element eine Breite von hat 400px. Beachten Sie in diesem Fall, dass das Umschalten table-layout: fixedkeine Auswirkung hat.

In der Pen Demo finden Sie die CSS-Eigenschaft für das Tabellenlayout von Louis Lazaris (@impressivewebs) auf CodePen.

Dies liegt daran, dass der Standard-Layout-Algorithmus im Wesentlichen lautet: "Machen Sie die erste Spalte 400 Pixel breit und verteilen Sie die verbleibenden Spalten basierend auf ihrem Inhalt." Da die anderen drei Spalten denselben Inhalt haben, wird keine Änderung vorgenommen. Aber jetzt fügen wir einer der anderen Spalten zusätzlichen Textinhalt hinzu:

Weitere Informationen finden Sie in der Pen Demo für die Tabellenlayout-Eigenschaft von CSS mit Spaltenbreite und variablem Inhalt von Louis Lazaris (@impressivewebs) auf CodePen.

Wenn Sie nun auf die Umschaltfläche klicken, werden die Spalten unabhängig vom Inhalt an ein festes Layout angepasst. Wieder passiert dasselbe; Die erste Spalte ist auf 400 Pixel eingestellt, dann werden die verbleibenden Spalten gleichmäßig aufgeteilt. Da diesmal jedoch eine der Spalten zusätzlichen Inhalt enthält, ist der Unterschied spürbar.

Wie ein fester Layoutalgorithmus die Spaltenbreiten bestimmt

Die folgenden zwei Demos sollen Ihnen helfen, zu verstehen, dass die erste Zeile der Tabelle dazu beiträgt, die Spaltenbreiten einer Tabelle zu definieren, auf die festgelegt wurde table-layout: fixed.

In der Stiftdemo finden Sie das CSS-Tabellenlayout mit der Zelle in Zeile 1, die von Louis Lazaris (@impressivewebs) auf CodePen definiert wurde.

In der obigen Demo hat die erste Zelle in der ersten Zeile der Tabelle eine Breite von 350 Pixel. Durch Umschalten werden table-layout: fixeddie anderen Spalten angepasst , die erste bleibt jedoch gleich. Probieren Sie nun die folgende Demo aus:

In der Stiftdemo finden Sie das Tabellenlayout von CSS mit der Zelle in Zeile 2, die von Louis Lazaris (@impressivewebs) auf CodePen definiert wurde.

In diesem Fall ist es die zweite Zeile, an deren erste Tabellenzelle eine Breite angehängt ist. Wenn Sie nun auf die Umschaltfläche klicken, werden alle Spaltenbreiten angepasst. Dies liegt wiederum daran, dass der Algorithmus mit festem Layout die erste Zeile verwendet, um die Spaltenbreiten zu bestimmen, und das Endergebnis ist, dass er die Breiten gleichmäßig verteilt.

Vorteile eines festen Layout-Algorithmus

Die ästhetischen Vorteile der Verwendung table-layout: fixedsollten aus den obigen Demonstrationen ersichtlich sein. Der andere große Vorteil ist die Leistung. Die Spezifikation bezeichnet den festen Algorithmus aus gutem Grund als "schnellen" Algorithmus. Der Browser muss nicht den gesamten Inhalt der Tabelle analysieren, bevor die Größe der Spalten ermittelt werden kann. Es muss nur die erste Zeile analysiert werden. Das Ergebnis ist eine schnellere Verarbeitung des Tabellenlayouts.