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
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