table-layout
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die table-layout
CSS Eigenschaft legt den Algorithmus fest, der zum Layout von <table>
Zellen, Reihen und Spalten verwendet wird.
Probieren Sie es aus
table-layout: auto;
width: 150px;
table-layout: fixed;
width: 150px;
table-layout: auto;
width: 100%;
table-layout: fixed;
width: 100%;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>Lion</td>
<td>Africa</td>
</tr>
<tr>
<td>Norwegian Lemming</td>
<td>Europe</td>
</tr>
<tr>
<td>Seal</td>
<td>Antarctica</td>
</tr>
<tr>
<td>Tiger</td>
<td>Asia</td>
</tr>
</table>
</section>
table {
border: 1px solid #139;
}
th,
td {
border: 2px solid #a19;
padding: 0.25rem 0.5rem;
}
Syntax
/* Keyword values */
table-layout: auto;
table-layout: fixed;
/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;
Werte
auto
-
Der automatische Tabellenlayout-Algorithmus wird verwendet. Die Breiten der Tabelle und ihrer Zellen werden an den Inhalt angepasst. Die meisten Browser verwenden diesen Algorithmus standardmäßig.
fixed
-
Der feste Tabellenlayout-Algorithmus wird verwendet. Bei Verwendung dieses Schlüsselworts muss die Breite der Tabelle explizit mit der
width
Eigenschaft festgelegt werden. Wenn der Wert derwidth
-Eigenschaft aufauto
gesetzt ist oder nicht angegeben wird, verwendet der Browser den automatischen Tabellenlayout-Algorithmus, in diesem Fall hat derfixed
-Wert keine Wirkung.
Der feste Tabellenlayout-Algorithmus ist schneller als der automatische Layout-Algorithmus, da das horizontale Layout der Tabelle nur von der Breite der Tabelle, der Breite der Spalten und den Rändern oder Zellenabständen abhängt. Das horizontale Layout hängt nicht vom Inhalt der Zellen ab, da es nur von explizit festgelegten Breiten abhängt.Im festen Tabellenlayout-Algorithmus wird die Breite jeder Spalte wie folgt bestimmt:
- Ein Spaltenelement mit expliziter Breite legt die Breite für diese Spalte fest.
- Andernfalls bestimmt eine Zelle in der ersten Reihe mit expliziter Breite die Breite für diese Spalte.
- Andernfalls erhält die Spalte die Breite aus dem gemeinsamen verbleibenden horizontalen Raum.
Mit diesem Algorithmus kann die gesamte Tabelle gerendert werden, sobald die erste Tabellenreihe heruntergeladen und analysiert wurde. Dies kann die Renderzeit im Vergleich zur „automatischen“ Layoutmethode beschleunigen, aber der nachfolgende Zellinhalt passt möglicherweise nicht in die vorgesehenen Spaltenbreiten. Zellen verwenden die
overflow
Eigenschaft, um zu bestimmen, ob überfließender Inhalt abgeschnitten werden soll, jedoch nur, wenn die Tabelle eine bekannte Breite hat; andernfalls überlaufen sie die Zellen nicht.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | table - und inline-table -Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
table-layout =
auto |
fixed
Beispiele
Tabellen mit fester Breite und Textüberlauf
Dieses Beispiel verwendet ein festes Tabellenlayout in Kombination mit der width
Eigenschaft, um die Breite der Tabelle zu begrenzen. Die text-overflow
Eigenschaft wird verwendet, um ein Ellipsis auf Wörter anzuwenden, die zu lang sind, um zu passen. Wenn das Tabellenlayout auto
wäre, würde die Tabelle wachsen, um ihren Inhalt aufzunehmen, trotz der angegebenen width
.
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
Specification |
---|
Cascading Style Sheets Level 2 # width-layout |