Webdesign, Tutorials und mehr - Webmasterpro.de

table-layout: Darstellung von Tabellenzellen

Die Eigenschaft table-layout beeinflusst die Darstellung der Breite von Tabellenzellen. Dabei werden beim Standardwert auto die Zellenbreiten dynamisch noch dem Platzbedarf des Inhalts angepasst. Wird der Eigenschaft jedoch der Wert fixed zugewiesen, werden die Zellen gleich groß dargestellt, sofern keine Breite angegeben ist.

Grafisches Beispiel table-layout

Enthält eine Tabelle sowohl Zellen mit fester Breite, als auch Zellen ohne Breitenangabe, wird die Breite letztere je nach Wert von table-layout angepasst. Beim Wert auto werden die verbleibenden Spalten also je nach Inhalt angepasst, bei fixed wird der verfügbare Platz gleichmäßig verteilt.

Dieses Verhalten tritt auch auf, wenn allen Zellen eine feste Breite zugeordnet ist, aber die Gesamtbreite der Tabelle dadurch nicht erreicht wird, also wenn beispielsweise eine Tabelle mit 3 Zellen mit 50px Breite eine Gesamtbreite von 300px hat. Bei Einsatz des Wertes fixed hätten hier die Zellen eine reale Breite von 100px, so dass die Tabellenbreite erreicht wird. Dies wird im folgenden Beispiel noch einmal veranschaulicht.

Beispiel

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<style type="text/css">
td, tr, table {
  border:1px #000 solid;
  border-collapse:collapse;
  text-align:center;
}
</style>

<table style="width:300px;  table-layout:fixed;">
  <tr>
    <td style="width:50px;">A</td>
    <td style="width:50px;">B</td>
    <td style="width:50px;">CDEFGHIJKL</td>
  </tr>
</table>

Obwohl die Breite der Zellen hier in Summe nur 150px ergeben, werden sie gestreckt, so dass die 300px Gesamtbreite erreicht werden.

<table style="width:300px; table-layout:fixed; ">
  <tr>
    <td style="width:50px;">A</td>
    <td style="width:50px;">B</td>
    <td>CDEFGHIJKL</td>
  </tr>
</table>

Hier wird nur die letzte Zelle gestreckt, da diese keine feste Breitenangabe besitzt

Kompatibilität

Alle gängigen Browser unterstützen diese Eigenschaft fehlerfrei.

Kommentare: table-layout: Darstellung von Tabellenzellen