Warum funktioniert „display: table-column' im CSS-Tabellenlayout nicht wie erwartet?

Warum funktioniert „Anzeige: Tabellenspalte“ nicht in meinem CSS-Layout?

Angesichts des bereitgestellten HTML- und CSS-Codes, Sie erwarten Sie möglicherweise ein Layout mit zwei Spalten („colLeft“ und „colRight“) und drei Zeilen („row1“, „row2“ und „row3“). In Browsern wie Chrome und IE wird das gesamte Layout jedoch auf die Größe Null reduziert.

Dieses Verhalten ist auf ein grundlegendes Missverständnis der Funktionsweise des CSS-Tabellenmodells zurückzuführen. Obwohl es dem HTML-Tabellenmodell ähnelt, gibt es entscheidende Unterschiede:

• Spalten sind keine direkten Container: In HTML-Tabellen sind Spalten ("") nicht direkt enthalten Zellen. Stattdessen sind Zellen („“) untergeordnete Elemente von Zeilen („“). Diese Struktur wird im CSS-Tabellenmodell beibehalten.
• „display: table-column“ definiert Zellattribute: Durch die Verwendung von „display: table-column“ für ein Element wird keine Spalte erstellt der traditionelle Sinn. Stattdessen werden Attribute festgelegt, die für Zellen innerhalb von Tabellenzeilen gelten. Sie könnten damit beispielsweise die Hintergrundfarbe der ersten Zelle in jeder Zeile definieren.
• Standardtabellenstruktur: Die Gesamtstruktur der Tabelle bleibt dieselbe wie in HTML. Zeilen enthalten Zellen und Spalten enthalten keinen direkten Inhalt.

Korrekte HTML- und CSS-Struktur:

Um ein gültiges CSS-Tabellenlayout zu erstellen, sollten Sie Folgendes tun Verwenden Sie die folgende Struktur:

<code class="html"><div class="mytable">
  <div class="mycolumn1"></div>
  <div class="mycolumn2"></div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 1</div>
    <div class="mycell">Contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 2</div>
    <div class="mycell">Contents of second cell in row 2</div>
  </div>
</div></code>

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

Das obige ist der detaillierte Inhalt vonWarum funktioniert „display: table-column' im CSS-Tabellenlayout nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!