
Tabellenlayout / dynamische Spaltenbreite
Steuert, ob sich die Spaltenbreite in Tabellen automatisch an den Inhalt anpasst oder nicht.
CSS-Eigenschaft: table-layoutKurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|
Tabellenlayout / dynamische Spaltenbreite | | auto | - Allgemein:
- Tabellen
- CSS 2.1:
- Tables
| |
---|
Verwandte Eigenschaften aus der Kategorie: Tabellen (allgemein), Tables (CSS 2.1):
Folgendes ist beim Einsatz von table-layout zu beachten:
- Der Default-Wert von table-layout ist auto und dafür verantwortlich, dass sich die Spaltenbreiten an der Menge des darin befindlichen Inhalts anpassen.
- fixed ignoriert die Menge des Inhalts in Tabellenzellen. Die Breite der Spalten berechnet sich aus [Breite der Tabelle / Anzahl der Spalten].
- table-layout: fixed wirkt nur in Kombination mit einer definierten Tabellenbreite, entweder per % oder als absoluter Wert.
Fehlt eine Breitenangabe für die Tabelle, greift table-layout: auto, die Angabe fixed wird dann ignoriert. Dies zeigt das Beispiel Nr. 6.
- Breiten, die für einzelne Zellen vergeben sind, werden dabei vollwertig berücksichtigt.
- fixed ignoriert die Länge von Worten innerhalb der einzelnen Zellen. Worte, die breiter sind als die automatisch berechnete Spaltenbreite
ragen über die Tabellenzelle hinaus, was im Beispiel Nr. 5 mit dem Text "Donaudampfschifffahrtskapitänsmütze" deutlich wird.
In der praktischen Anwendung bedeutet das: Solange Texte statisch sind und man die Ausgabe einer HTML-Seite kontrollieren kann, kann fixed
einsetzt werden. Kommen hingegen Inhalte aus dynamischen Quellen und man kennt die Textlängen nicht, ist stark davon abzuraten!
- In der Praxis sieht man selten den Einsatz von table-layout. Falls Spaltenbreiten aktiv gesteuert werden sollen,
wird das häufig über die Definition der einzelnen Spaltenbreiten im CSS oder HTML umgesetzt.
Browserunterstützung von table-layout
|  Firefox |  Google Chrome |  Internet Explorer |  Safari |  Opera |
CSS21 | Version: 16 | Version: 25 | Version: 30 | Version: 31 | Version: 32 |
---|
j |
| Version: 20 | Version: 30 | Version: 35 | Version: 36 | Version: 37 |
---|
j |
| Version: 8 | Version: 9 | Version: 10 | Version: 11 |
---|
j |
| Version: 4 | Version: 5 | Version: 6 | Version: 7 |
---|
j |
| Version: 10 | Version: 11 | Version: 12 |
---|
j |
|
Weiterführende Informationen zu table-layout:
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
tab-size - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
target
Beispiele
HTML:
<table>
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
</table>
CSS:
table {
border: 3px solid #780000;
width: 100%;
}
/* Grundlage für alle Beispiele ist eine Tabelle mit einer definierten Breite von 100%. */
th,
td {
border: 1px solid #FF0000;
}
/* Per Default richten sich Spaltenbreiten am Inhalt aus.
In diesem Beispiel an der Länger der Texte in den Kopfzeilen. */
Beispiel Nr. 1 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
1 2 |
1 3 |
2 1 |
2 2 |
2 3 |
HTML:
<table class="doFixed">
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
</table>
CSS:
table.doFixed {
table-layout: fixed;
}
/* Über fixed werden die Spaltenbreiten rechnerisch bestimmt, bei drei Spalten hat jede eine 1/3-Breite der Tabellenbreite. */
Beispiel Nr. 2 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
1 2 |
1 3 |
2 1 |
2 2 |
2 3 |
HTML:
<table>
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text </td>
<td>1 3</td>
</tr>
</table>
CSS:
/* Hier richtet sich die Spaltenbreite nach dem Inhalt der Zellen. */
Beispiel Nr. 3 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text |
1 3 |
HTML:
<table class="doFixed">
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text </td>
<td>1 3</td>
</tr>
</table>
CSS:
/* Über fixed wird hier gesteuert, dass alle Spalten die gleiche Breite haben. */
Beispiel Nr. 4 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text |
1 3 |
HTML:
<table class="doFixed">
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>Donaudampfschifffahrtskapitänsmütze</td>
<td>1 3</td>
</tr>
</table>
CSS:
/* Sind die Spaltenbreiten über fixed festgelegt, ragen längere Texte über die Zelle hinaus. */
Beispiel Nr. 5 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
Donaudampfschifffahrtskapitänsmütze |
1 3 |
HTML:
<table id="example-6">
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>Donaudampfschifffahrtskapitänsmütze</td>
<td>1 3</td>
</tr>
</table>
CSS:
#example-6 {
table-layout: fixed;
}
#example-6 td {
word-wrap: break-word;
}
/* Ungewolltem Überhang kann mit word-wrap: break-word begegnet werden. */
Beispiel Nr. 6 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
Donaudampfschifffahrtskapitänsmütze |
1 3 |
HTML:
<table id="example-7">
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>Donaudampfschifffahrtskapitänsmütze</td>
<td>1 3</td>
</tr>
</table>
CSS:
#example-7 {
table-layout: fixed;
}
#example-7 td {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
/* Besser noch die Eigenschaft hyphens - diese trennt die Worte nach orthografischen Regeln. */
Beispiel Nr. 7 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
Donaudampfschifffahrtskapitänsmütze |
1 3 |
HTML:
<table class="doFixed doAutoWidth">
<tr>
<th>Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>Donaudampfschifffahrtskapitänsmütze</td>
<td>1 3</td>
</tr>
</table>
CSS:
.doAutoWidth {
width: auto;
}
/* Mit einer zweiten CSS-Definition wird das table-layout hier wieder auf auto gesetzt. Die Spaltenbreiten ergeben sich wieder aus der Menge des Inhalts. */
Beispiel Nr. 8 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
Donaudampfschifffahrtskapitänsmütze |
1 3 |
HTML:
<table class="doFixed">
<tr>
<th class="doHalb">Head 1</th>
<th>H 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>1 1</td>
<td>viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text </td>
<td>1 3</td>
</tr>
</table>
CSS:
.doHalb {
width: 60%;
}
/* Trotz einer Angabe von fixed können die Breiten einzelner Zellen bestimmt werden. Die beiden rechten Spalten verhalten sich aber strikt nach der Berechnung, sie nehmen jeweils 50% des verbleibenden Platzes ein. */
Beispiel Nr. 9 So sieht's aus:
Head 1 |
H 2 |
Headline 3 |
1 1 |
viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text |
1 3 |