`table-layout` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die table-layout CSS-Eigenschaft legt den Algorithmus fest, der verwendet wird, um die Zellen, Zeilen und Spalten eines <table> zu gestalten.

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;
}

Der automatische Tabellenlayout-Algorithmus wird verwendet. Die Breiten der Tabelle und ihrer Zellen werden angepasst, um zum Inhalt zu passen. Die meisten Browser verwenden diesen Algorithmus standardmäßig.

fixed

Der feste Tabellenlayout-Algorithmus wird verwendet. Bei Verwendung dieses Schlüsselworts muss die Breite der Tabelle explizit mithilfe der width-Eigenschaft festgelegt werden. Ist der Wert der width-Eigenschaft auf auto gesetzt oder nicht festgelegt, verwendet der Browser den automatischen Tabellenlayout-Algorithmus, wobei der fixed-Wert keine Wirkung hat.
Der feste Tabellenlayout-Algorithmus ist schneller als der automatische Layout-Algorithmus, da das horizontale Layout der Tabelle nur von der Tabellenbreite, der Breite der Spalten und Rändern oder Zellabständen abhängt. Das horizontale Layout hängt nicht vom Inhalt der Zellen ab, da es nur von explizit festgelegten Breiten abhängt.

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

Ein Spaltenelement mit expliziter Breite legt die Breite für diese Spalte fest.
Andernfalls bestimmt eine Zelle in der ersten Zeile mit expliziter Breite die Breite für diese Spalte.
Andernfalls erhält die Spalte die Breite aus dem geteilten 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 könnte nicht in die bereitgestellten Spaltenbreiten passen. Zellen verwenden die overflow-Eigenschaft, um zu bestimmen, ob überlaufender Inhalt abgeschnitten werden soll, jedoch nur, wenn die Tabelle eine bekannte Breite hat; andernfalls läuft der Inhalt nicht aus den Zellen über.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	`table`- und `inline-table`-Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

table-layout = 
  auto   |
  fixed

Beispiele

Festbreite-Tabellen mit Textüberlauf

Dieses Beispiel verwendet ein festes Tabellenlayout in Kombination mit der width-Eigenschaft, um die Breite der Tabelle zu begrenzen. Die text-overflow-Eigenschaft wird verwendet, um ein Auslassungszeichen für 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

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

css

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

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