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>

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>

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.

Browser-Support

14.0+ 12.0+ 1.0+ 1.0+ 7.0+


Finden Sie das nützlich?

Ähnliche Artikel