Was macht „display: table-column' eigentlich in CSS?

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

In HTML bestehen Tabellen aus Zeilen, wobei jede Zeile enthaltende Zellen. CSS erweitert dieses Konzept und ermöglicht Designern die Definition spezifischer Zeilen- und Spaltenlayouts. Während „Anzeige: Tabellenzeile“ und „Anzeige: Tabellenzelle“ unkompliziert sind, hat „Anzeige: Tabellenspalte“ einen differenzierteren Zweck.

Verstehen der Funktion von „Anzeige: Tabellen- 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:

<code class="html"><table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table></code>

Entsprechend der HTML-Struktur kann folgendes CSS angewendet werden:

<code class="css">.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}</code>

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

Wichtige Punkte, die Sie beachten sollten

• „display: table-column“ legt Attribute für Zellen innerhalb von Tabellenzeilen fest , nicht für Spalten selbst.
• Die zugrunde liegende Tabellenstruktur bleibt dieselbe wie in HTML, wobei Zellen untergeordnete Elemente von Zeilen sind.
• „display: table-column“ bietet keinen Mechanismus für Multi -Spaltenlayouts, bei denen der Inhalt zwischen den Spalten fließt.

Das obige ist der detaillierte Inhalt vonWas macht „display: table-column' eigentlich in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!