table-layout

Die CSS Eigenschaft table-layout legt den Algorithmus fest, der für das Layout von <table> Zellen, Zeilen und Spalten verwendet wird.

Syntax

/* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

Werte

auto (en-US)
Standardwert. Die meisten Browser haben einen automatischen Tabellenlayout-Algorithmus. Die Breiten der Tabelle und ihrer Zellen werden an den Inhalt angepasst.
fixed
Die Tabellen- und Spaltenbreiten werden durch die Breiten der Tabellen- und Spaltenelemente oder durch die Breite der ersten Zellenzeile festgelegt. Zellen in nachfolgenden Zeilen haben keinen Einfluss auf die Spaltenbreiten.
Bei der "festen" oder "fixierten" fixed Layoutmethode kann die gesamte Tabelle gerendert werden, sobald die erste Tabellenzeile heruntergeladen und analysiert wurde. Dies kann die Renderingzeit bei der "automatischen" auto Layoutmethode beschleunigen, aber der Inhalt nachfolgender Zellen passt möglicherweise nicht in die bereitgestellten Spaltenbreiten. Zellen verwenden die Eigenschaft overflow, um zu bestimmen, ob überlaufende Inhalte abgeschnitten werden sollen. Dies erfolgt aber nur, wenn die Breite der Tabelle bekannt ist; andernfalls werden die Zellen nicht überlaufen.

Formale Definition

Initialwertauto
Anwendbar auftable- und inline-table-Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

auto | fixed

Beispiele

Tabellen fester Breite mit Text-Überlauf

In diesem Beispiel wird ein festes fixed Tabellenlayout in Kombination mit der Eigenschaft width verwendet, um die Breite der Tabelle einzuschränken. Die Eigenschaft text-overflow wird verwendet, um eine Ellipse auf Wörter anzuwenden, die zu lang sind, um in die Tabelle zu passen.
Wenn das Tabellenlayout automatisch auto wäre, würde die Tabelle trotz der angegebenen Breite wachsen, um ihren Inhalt aufzunehmen.

HTML

<table>
  <tr><td>Ed</td><td>Wood</td></tr>
  <tr><td>Albert</td><td>Schweitzer</td></tr>
  <tr><td>Jane</td><td>Fonda</td></tr>
  <tr><td>William</td><td>Shakespeare</td></tr>
</table>

CSS

table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Ergebnis

Spezifikationen

Spezifikation Status Kommentar
CSS Level 2 (Revision 1)
Die Definition von 'table-layout' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition.

Browser Kompatibilität

BCD tables only load in the browser

Siehe auch