Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-11-04 04:36:29
Original
541 Leute haben es durchsucht

Why Doesn't

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>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage