Wie soll ein CSS „display: table-column“ funktionieren?

In HTML bestehen Tabellen aus Zeilen, mit jeder Zeile enthaltende Zellen. CSS erweitert dieses Konzept und ermöglicht Designern die Definition spezifischer Zeilen- und Spaltenlayouts. Während „display: table-row“ und „display: table-cell“ unkompliziert sind, hat „display: table-column“ einen differenzierteren Zweck.

Die Funktion von „display: table-column“ verstehen Spalte“

Im Gegensatz zu „display: table-row“ und „display: table-cell“ erstellt „display: table-column“ keine neue Spaltenstruktur. Stattdessen werden Attribute für Zellen innerhalb vorhandener Tabellenzeilen festgelegt. Sie können beispielsweise die Hintergrundfarbe der ersten Zelle in jeder Zeile angeben.

HTML vs. CSS-Tabellenstruktur

Um dieses Konzept zu verstehen, betrachten Sie den folgenden HTML-Code Tabelle:

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

Entsprechend der HTML-Struktur kann folgendes CSS angewendet werden:

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

In diesem Beispiel sind die Divs „.column1“ und „.column2“ keine Container für Inhalte. Sie definieren lediglich Attribute für die Zellen innerhalb von Tabellenzeilen.

Wichtige Punkte, die Sie sich merken sollten

• "display: table-column" legt Attribute für Zellen innerhalb von Tabellenzeilen fest , nicht für die Spalten selbst.
• Die zugrunde liegende Tabellenstruktur bleibt dieselbe wie in HTML, wobei Zellen untergeordnete Elemente davon sind Zeilen.
• "display: table-column" bietet keinen Mechanismus für mehrspaltige Layouts, bei denen Inhalte zwischen Spalten fließen.