Wie funktioniert „display: table-column' in CSS?

Die Rolle von „display:table-column“ in CSS

In diesem Artikel werden wir untersuchen, wie „display:table-column“ Spalte“ funktioniert in CSS.

Das CSS-Tabellenmodell orientiert sich am HTML-Tabellenmodell, bei dem Zeilen und Zellen grundlegende Komponenten sind. „display: table-column“ allein kann keine Spaltenlayouts erstellen.

Stattdessen werden Attribute festgelegt, die für Zellen innerhalb von Tabellenzeilen spezifisch sind. Beispielsweise kann die Hintergrundfarbe der ersten Zelle in jeder Zeile angegeben werden.

In HTML ist die Struktur einer Tabelle wie folgt:

<code class="html"><table>
  <col></col>
  <col></col>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table></code>

Mithilfe von CSS-Tabelleneigenschaften wird die entsprechendes HTML wäre:

<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>

<code class="html"><div class="mytable">
  <div class="column1"></div>
  <div class="column2"></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>

Durch das Verständnis der Beziehung zwischen Spalten und Zeilen im CSS-Tabellenmodell können Entwickler effektiv tabellenartige Layouts erstellen und zellenspezifische Attribute steuern.

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