CSS table-layout-Eigenschaft

Die CSS-Eigenschaft table-layout legt die Algorithmen fest, die zum Anordnen von Tabellenzellen, Zeilen und Spalten verwendet werden.

Die Eigenschaft table-layout definiert zwei Algorithmen für die Tabellenanordnung: fixed (fest) und auto (automatisch).

Bei der Angabe von „auto“ (automatisch) wird die Tabellenbreite durch die Breite ihrer Spalten bestimmt.

Bei der Angabe von „fixed“ (fest) verwendet das Tabellenlayout die Tabellenbreite, eventuelle festgelegte Spaltenbreiten sowie Werte für Rahmen und Zellabstand (cellspacing). Der Vorteil der Eigenschaft table-layout mit dem Wert „fixed“ liegt in der Performance. Bei großen Tabellen wird diese erst angezeigt, wenn der gesamte Tabelleninhalt gerendert wurde. Dies erzeugt den Eindruck, dass die Seite schneller lädt.

Anfangswert	auto
Gilt für	Table- und inline-table-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS2
DOM-Syntax	object.style.tableLayout = "fixed";

Syntax

CSS-Syntax für table-layout

css

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

Beispiel für die table-layout-Eigenschaft mit dem Wert „fixed“:

CSS-Codebeispiel für table-layout

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 40%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 20%</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS table-layout values

Beispiel für die table-layout-Eigenschaft mit den Werten „auto“ und „fixed“:

Beispiel für table-layout-Werte

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 160px</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Hague</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Testen »
auto	Verwendet einen automatischen Layoutalgorithmus, wenn die Tabelle und ihre Zellen zum Inhalt passen. Dies ist der Standardwert dieser Eigenschaft.	Testen »
fixed	Verwendet einen festen Tabellenlayoutalgorithmus. Die Breiten der Tabelle, der Spalte und der ersten Zeile von Zellen legen die Tabellen- und Spaltenbreiten fest.	Testen »
initial	Legt die Eigenschaft auf ihren Standardwert fest.	Testen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was bewirkt die CSS-Eigenschaft table-layout?

Sie ermöglicht es, die Anzeigebreite der Spalten auf der Webseite festzulegen.Sie ermöglicht es, den Schriftstil des Textes in der Tabelle zu ändern.Sie legt den für eine Tabelle zu verwendenden Layoutalgorithmus fest.Sie ändert die Farbe des Tabellenhintergrunds.Sie definiert den Rahmenstil der Tabelle.

CSS table-layout-Eigenschaft ​

Syntax ​

Beispiel für die table-layout-Eigenschaft mit dem Wert „fixed“: ​

Ergebnis ​

Beispiel für die table-layout-Eigenschaft mit den Werten „auto“ und „fixed“: ​

Werte ​