PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: table-layout, Kategorien: Tabellen (allgemein), Tables (CSS 2.1)

Tabellenlayout / dynamische Spaltenbreite

Steuert, ob sich die Spaltenbreite in Tabellen automatisch an den Inhalt anpasst oder nicht.

CSS-Eigenschaft: table-layout
KurzbeschreibungWerteStandardwertKategorieHinweis
Tabellenlayout / dynamische Spaltenbreite
  • auto
  • fixed
  • inherit
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
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu table-layout:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    tab-size


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
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.036 sec.