CSS 2.1: `table-layout`

Erläuterungen

Die Eigenschaft table-layout legt fest, wie die Auslegung von Zellen, Reihen und Spalten einer Tabelle berechnet wird. Sie ist auf Tabellen und, allgemein ausgedrückt, auf alle Elemente, deren Eigenschaft display den Wert table oder inline-table enthält, anwendbar.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'table-layout' auto | fixed | inherit

auto (Ausgangswert)

Hier gibt das W3C zwar einen Algorithmus an, mit dem die Breite der einzelnen Spalten bestimmt werden soll, es erlaubt aber gleichzeitig den Anwenderprogrammen, einen beliebigen eigenen, davon abweichenden, Algorithmus zu benutzen.

fixed

Der Wert fixed bewirkt, dass das Anwenderprogramm eine Tabelle bereits dann darstellen kann, wenn die Breite der ersten Reihe feststeht. Nur die Breitenangaben innerhalb der ersten Reihe haben einen Einfluß auf die Breite der Tabelle und ihrer Spalten. Sie werden wie folgt festgelegt:

Alle angegebenen Breitenwerte von Elementen col (falls vorhanden) werden direkt verwendet.
Darüber hinaus bestimmt jede Zelle, deren Eigenschaft width nicht mit auto besetzt ist, die Breite der zugehörigen Spalte.
Alle anderen Spalten erhalten den übrig gebliebenen Platz abzüglich der Rahmen und Zwischenräume zu gleichen Teilen.
Die Summe der Breitenwerte für Spaltenbreiten, Zwischenräume und Rahmen ergibt dann die Breite der Tabelle, wenn dem Element table selbst nicht eine größere Breite gegeben wurde.
Ist die für table gegebene Breite größer als die Summe der Einzelwerte, wird der Überschuss gleichmäßig auf die Spalten verteilt.

Sollten die Inhalte einzelner Tabellenzellen weiter unten zu groß sein, haben sie keinen Einfluß mehr auf die Spaltenbreite. Die Darstellung dieser Inhalte ist abhängig vom Wert der Eigenschaft overflow.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

DIV.tabelle { display: inline-table; table-layout: fixed; }

Browserunterstützung

: Die Eigenschaft table-layout wird bisher von keinem Browser unterstützt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

display, overflow, width

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Das CSS-Tabellenmodell ist für das Medium handheld nicht anwendbar. Die Eigenschaften border-collapse, border-spacing, caption-side und empty-cells sind nicht Teil des Standards 'CSS Mobile'.