table-layout CSS property

Probieren Sie es aus

table-layout: auto;
width: 150px;

table-layout: fixed;
width: 150px;

table-layout: auto;
width: 100%;

table-layout: fixed;
width: 100%;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <tbody>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
      <tr>
        <td>Lion</td>
        <td>Africa</td>
      </tr>
      <tr>
        <td>Norwegian Lemming</td>
        <td>Europe</td>
      </tr>
      <tr>
        <td>Seal</td>
        <td>Antarctica</td>
      </tr>
      <tr>
        <td>Tiger</td>
        <td>Asia</td>
      </tr>
    </tbody>
  </table>
</section>

table {
  border: 1px solid #113399;
}

th,
td {
  border: 2px solid #aa1199;
  padding: 0.25rem 0.5rem;
}

Syntax

/* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;

Werte

Diese Eigenschaft wird als eines der folgenden Schlüsselwörter angegeben:

auto

Der automatische Tabellenlayout-Algorithmus wird verwendet. Die Breiten der Tabelle und ihrer Zellen werden an den Inhalt angepasst. Die meisten Browser verwenden standardmäßig diesen Algorithmus.

fixed

Der feste Tabellenlayout-Algorithmus wird verwendet. Bei der Verwendung dieses Schlüsselworts muss die Breite der Tabelle ausdrücklich mit der width-Eigenschaft angegeben werden. Wenn der Wert der width-Eigenschaft auf auto gesetzt ist oder nicht angegeben wird, verwendet der Browser den automatischen Tabellenlayout-Algorithmus, wobei der fixed-Wert keinen Effekt hat.
Der feste Tabellenlayout-Algorithmus ist schneller als der automatische Layout-Algorithmus, da das horizontale Layout der Tabelle nur von der Breite der Tabelle, den Breiten der Spalten und Rändern oder Zellabständen abhängt. Das horizontale Layout hängt nicht vom Inhalt der Zellen ab, sondern nur von den ausdrücklich festgelegten Breiten.

Beim festen Tabellenlayout-Algorithmus wird die Breite jeder Spalte wie folgt bestimmt:

• Ein Spaltentitel mit ausdrücklich festgelegter Breite setzt die Breite für diese Spalte.
• Andernfalls bestimmt eine Zelle in der ersten Zeile mit ausdrücklich festgelegter Breite die Breite für diese Spalte.
• Andernfalls erhält die Spalte die Breite aus dem gemeinsam verbleibenden horizontalen Raum.

Mit diesem Algorithmus kann die gesamte Tabelle gerendert werden, sobald die erste Tabellenzeile heruntergeladen und analysiert wurde. Dies kann die Renderzeit im Vergleich zur "automatischen" Layout-Methode beschleunigen, aber nachfolgender Zellinhalt passt möglicherweise nicht in die vorgesehenen Spaltenbreiten. Zellen verwenden die overflow-Eigenschaft, um zu bestimmen, ob ein übergehender Inhalt abgeschnitten werden soll, jedoch nur, wenn die Tabelle eine bekannte Breite hat; andernfalls fließen sie nicht über die Zellgrenzen hinaus.

Formale Definition

Formale Syntax

table-layout = 
  auto   |
  fixed  

Beispiele

Festbreiten-Tabellen mit Textüberlauf

In diesem Beispiel wird ein festes Tabellenlayout, kombiniert mit der width-Eigenschaft, verwendet, um die Breite der Tabelle zu begrenzen. Die text-overflow-Eigenschaft wird verwendet, um ein Auslassungszeichen auf Wörter anzuwenden, die zu lang sind, um zu passen. Wenn das Tabellenlayout auto wäre, würde die Tabelle wachsen, um ihren Inhalt aufzunehmen, trotz der angegebenen width.

HTML

<table>
  <tbody>
    <tr>
      <td>Ed</td>
      <td>Wood</td>
    </tr>
    <tr>
      <td>Albert</td>
      <td>Schweitzer</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Fonda</td>
    </tr>
    <tr>
      <td>William</td>
      <td>Shakespeare</td>
    </tr>
  </tbody>
</table>

CSS

table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <table>
• CSS-Tabellen Modul