CSS table-layout-Eigenschaft

Definition und Verwendung

Die tableLayout-Eigenschaft wird verwendet, um die Algorithmusregeln zur Anzeige der Tabellenzellen, Zeilen und Spalten zu definieren.

Festes Tabellenlayout:

Im Vergleich zum automatischen Tabellenlayout ermöglicht das feste Tabellenlayout dem Browser, die Tabelle schneller zu layouten.

Im festen Tabellenlayout hängt die horizontale Layout nur von der Tabellenbreite, der Spaltenbreite, der Tabellenrandbreite und dem Zellenabstand ab und hat nichts mit dem Inhalt der Zellen zu tun.

Durch die Verwendung des festen Tabellenlayout kann der Benutzeragent die Tabelle nach Erhalt der ersten Zeile anzeigen.

Automatisches Tabellenlayout:

Bei der automatischen Tabellenlayout wird die Breite der Spalten durch den breitesten Inhalt festgelegt, der in der Spaltenzelle ohne Umbruch enthalten ist.

Dieser Algorithmus kann manchmal langsamer sein, da er alle Inhalte der Tabelle überprüfen muss, bevor das endgültige Layout festgelegt wird.

Erklärung

Diese Eigenschaft bestimmt den Layout-Algorithmus, der zur vollständigen Tabellenlayout verwendet wird. Der festgelegte Layout-Algorithmus ist schneller, aber weniger flexibel, während der automatische Algorithmus langsamer ist, aber besser die traditionelle HTML-Tabelle widerspiegelt.

Weitere Informationen siehe:

CSS-Tutorial:CSS Tabelle

HTML DOM Referenzhandbuch:tableLayout-Eigenschaft

Beispiel

Legen Sie das Layout-Algorithmus der Tabelle fest:

Tabelle
  {
  table-layout:fixed;
  }

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
automatic Standard. Die Spaltenbreite wird durch den Inhalt der Zellen festgelegt.
fixed Die Spaltenbreite wird durch die Tabellenbreite und die Spaltenbreite festgelegt.
inherit Es wird vorgeschrieben, dass der Wert der table-layout-Eigenschaft vom übergeordneten Element geerbt wird.

Technische Details

Standardwert: auto
Vererbbarkeit: ja
Version: CSS2
JavaScript-Syntax: Objekt.style.tableLayout="fixed"

Mehr Beispiele

Layout der Tabelle einstellen
Dieses Beispiel zeigt, wie man die Layout der Tabelle einstellt.

Browser-Unterstützung

Die Zahlen in der Tabelle kennzeichnen die erste Browser-Version, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
14.0 5.0 1.0 1.0 7.0