CSS-Eigenschaft table-layout

Die Eigenschaft table-layout definiert die Algorithmen, mit denen Tabellenzellen, Zeilen und Spalten angeordnet werden.

Die Eigenschaft table-layout bestimmt zwei Algorithmen, um Tabellen anzulegen: fixed und automatic.

Wenn table layout auf "automatic" eingestellt ist, wird die Breite der Tabelle durch die Breite ihrer Spalten bestimmt.

Wenn table layout auf "fixed" eingestellt ist, verwendet das Layout der Tabelle die Breite der Tabelle, eine beliebige Breite der Spalten sowie Werte für den Rahmen und den Zellabstand.

Anfangswert	auto
Gilt für	Tabellen- und Inline-Tabellenelemente
Geerbt	Nein
Animierbar	Nein
Version	CSS2
DOM Syntax	object.style.tableLayout = "fixed";

Syntax

table-layout: auto | fixed | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      th, td {
      border: 2px solid #666;
      }
      table.t1 {
      table-layout: fixed;
      width: 40%;  
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft table-layout</h2>
    <h3>Table-layout: fixed; width: 20%</h3>
    <table class="t1">
      <tr>
        <th>Staat</th>
        <th>Hauptstadtpital</th>
        <th>Stadt</th>
      </tr>
      <tr>
        <td>Russland</td>
        <td>Moskau</td>
        <td>Sankt Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Die Niederlande</td>
        <td>Amsterdam</td>
        <td>Haag</td>
      </tr>
    </table>
  </body>
</html>

Versuch es selber!

Ein Beispiel, wo die Algorithmen "auto" und "fixed" verwendet werden:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft table-layout</h2>
    <h3>Table-layout: fixed; width: 160px</h3>
    <table class="t1">
      <tr>
        <th>Staat</th>
        <th>Hauptstadt</th>
        <th>Stadt</th>
      </tr>
      <tr>
        <td>Russland</td>
        <td>Moskau</td>
        <td>Sankt Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Die Niererlande</td>
        <td>Amsterdam</td>
        <td>Haag</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Staat</th>
        <th>Hauptstadt</th>
        <th>Stadt</th>
      </tr>
      <tr>
        <td>Russland</td>
        <td>Moskau</td>
        <td>Sankt Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Die Niederlande</td>
        <td>Amsterdam</td>
        <td>Haag</td>
      </tr>
    </table>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Verwendet einen automatischen Layoutalgorithmus, wenn die Tabelle und ihre Zellen zum Inhalt passen. Das ist der Standardwert dieser Eigenschaft.
fixed	Verwendet den Algorithmus des festen Tabellenlayouts. Die Breiten von Tabelle, Spalte und der ersten Zeile der Zellen setzen die Tabellen- und Spaltenbreiten.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.