CSS table-layout Eigenschaft
Die CSS-Eigenschaft table-layout legt das Layout von Tabellenzellen, Zeilen und Spalten fest. Werte und Beispiele.
Die CSS-Eigenschaft table-layout legt den Algorithmus fest, den ein Browser verwendet, um die Breiten von Tabellenzellen, Zeilen und Spalten zu berechnen. Es gibt zwei mögliche Algorithmen — auto und fixed — und die Wahl zwischen ihnen beeinflusst sowohl die Größenberechnung einer Tabelle als auch die Rendergeschwindigkeit.
Diese Seite erklärt, wie jeder Algorithmus funktioniert, wann fixed sinnvoll ist und welche Fallstricke (z. B. Textüberlauf) damit verbunden sind.
Wie die beiden Algorithmen funktionieren
auto (der Standardwert) lässt den Inhalt die Spaltenbreiten bestimmen. Der Browser muss jede Zelle in jeder Zeile lesen, bevor er das Layout berechnen kann, und weitet dann jede Spalte so aus, dass der längste Inhalt passt. Das ergibt eine natürlich wirkende Tabelle, bedeutet aber auch, dass sich eine Tabelle verschieben kann, wenn weiterer Inhalt geladen wird, und sehr lange Wörter eine Spalte breiter machen können als beabsichtigt.
fixed ignoriert den Inhalt der meisten Zellen und bestimmt die Spaltenbreiten anhand der width-Angabe der Tabelle selbst, expliziter Spaltenbreiten (in den Zellen der ersten Zeile oder in <col>-Elementen) sowie Rahmen und Zellabstände. Da das Layout nicht mehr von jeder Zelle abhängt, kann der Browser die Tabelle in einem einzigen Durchlauf rendern.
Es gibt zwei praktische Gründe, fixed zu wählen:
- Leistung. Mit
autokann eine große Tabelle erst gezeichnet werden, wenn die gesamte Tabelle geparst und vermessen wurde.fixedrendert Zeile für Zeile, während der Inhalt eintrifft, sodass eine lange Tabelle schneller erscheint und die Seite gefühlt schneller lädt. - Vorhersehbarkeit. Spaltenbreiten bleiben genau dort, wo man sie gesetzt hat, und springen nicht, wenn sich der Zelleninhalt ändert — nützlich für Datentabellen mit bekannter Struktur.
Der Kompromiss: Mit fixed verbreitert Inhalt, der breiter ist als seine Spalte, die Spalte nicht. Standardmäßig überläuft er die Zelle. In der Regel kombiniert man fixed mit word-wrap / overflow-wrap, text-overflow oder overflow, um zu steuern, was mit zu großem Inhalt passiert.
| Anfangswert | auto |
|---|---|
| Gilt für | Tabellen- und Inline-Tabellen-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.tableLayout = "fixed"; |
Syntax
CSS table-layout Syntax
table-layout: auto | fixed | initial | inherit;Beispiele
Beispiel der table-layout-Eigenschaft mit dem Wert "fixed":
CSS table-layout Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th,
td {
border: 2px solid #666;
}
table.t1 {
table-layout: fixed;
width: 40%;
}
</style>
</head>
<body>
<h2>Table-layout property example</h2>
<h3>Table-layout: fixed; width: 40%</h3>
<table class="t1">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>The Hague</td>
</tr>
</table>
</body>
</html>Ergebnis
Beispiel der table-layout-Eigenschaft mit den Werten "auto" und "fixed":
CSS table-layout Werte-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th,
td {
border: 2px solid #666;
}
table.t1 {
table-layout: fixed;
width: 250px;
}
table.t2 {
table-layout: auto;
width: 100%;
}
</style>
</head>
<body>
<h2>Table-layout property example</h2>
<h3>Table-layout: fixed; width: 250px</h3>
<table class="t1">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>The Hague</td>
</tr>
</table>
<h3>Table-layout: auto; width: 100%</h3>
<table class="t2">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>The Hague</td>
</tr>
</table>
</body>
</html>Mit table-layout: fixed behält die erste Tabelle ihre drei gleich breiten 250px-Spalten, egal wie lang die Städtenamen werden, während die auto-Tabelle sich ausdehnt, um "Saint Petersburg" aufzunehmen. Das ist der wesentliche Unterschied: fixed respektiert Ihre Breitenangaben, auto respektiert den Inhalt.
Überlauf mit table-layout: fixed steuern
Da fixed-Spalten nicht wachsen, um langen Inhalt aufzunehmen, verlässt ein Wort, das breiter als die Spalte ist, die Zelle. Die Lösung ist, den Text umzubrechen oder abzuschneiden. Das folgende Snippet zeigt drei gängige Ansätze nebeneinander:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
table-layout: fixed;
width: 300px;
border-collapse: collapse;
}
td {
border: 2px solid #666;
width: 100px;
padding: 4px;
}
.clip {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wrap {
overflow-wrap: break-word;
}
</style>
</head>
<body>
<table>
<tr>
<td>Overflows by default</td>
<td class="clip">Supercalifragilisticexpialidocious</td>
<td class="wrap">Supercalifragilisticexpialidocious</td>
</tr>
</table>
</body>
</html>Die mittlere Zelle schneidet das lange Wort mit einem Auslassungszeichen ab (text-overflow: ellipsis), während die rechte Zelle es auf mehrere Zeilen umbricht (overflow-wrap: break-word).
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Verwendet einen automatischen Layout-Algorithmus, bei dem sich Tabelle und Zellen dem Inhalt anpassen. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| fixed | Verwendet den festen Tabellen-Layout-Algorithmus. Die Breiten der Tabelle, der col-Elemente und der Zellen der ersten Zeile bestimmen die Tabellen- und Spaltenbreiten. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
table-layout arbeitet zusammen mit anderen CSS-Eigenschaften, die Tabellen gestalten:
border-collapse— Wählen Sie zwischen getrennten und zusammengefassten Zellenrahmen.border-spacing— Legen Sie den Abstand zwischen Zellen fest, wenn Rahmen getrennt sind.empty-cells— Zeigen oder verstecken Sie Rahmen und Hintergründe bei Zellen ohne Inhalt.width— Legen Sie die Gesamtbreite der Tabelle fest, auf der derfixed-Algorithmus aufbaut.white-space— Steuern Sie den Textumbruch innerhalb von Zellen mit fester Breite.