Apakah Tujuan dan Struktur CSS \"display: table-column\"?

CSS "display: table-column" Diterangkan

Dalam pembangunan web, sifat "display: table-column" sering disalahertikan. Ia bertujuan untuk berfungsi dalam model jadual CSS, yang berdasarkan model jadual HTML.

Model Jadual CSS

Jadual dalam model jadual CSS dibahagikan ke dalam baris dan lajur, dengan sel menduduki kedudukan tertentu dalam baris. Walau bagaimanapun, tidak seperti jadual HTML, "display: table-column" tidak membenarkan kandungan diletakkan terus dalam lajur.

Tujuan "display: table-column"

Matlamat utama "display: table-column" adalah untuk menetapkan atribut untuk sel jadual, sama seperti cara sifat "display: table-cell". Contohnya, ia boleh mentakrifkan warna latar belakang sel pertama dalam setiap baris.

Cara Lajur Disusun

Dalam HTML, lajur bukan bekas untuk sel; sel diletakkan dalam baris. Struktur yang sama digunakan dalam model jadual CSS. Contohnya:

<code class="HTML"><table>
  <tr>
    <td>Column 1 Content</td>
    <td>Column 2 Content</td>
  </tr>
</table></code>

Perwakilan Jadual CSS

Untuk mencapai susun atur yang serupa menggunakan sifat jadual CSS:

<code class="CSS">.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
.col-1 {
  display: table-column;
  background-color: green;
}
.col-2 {
  display: table-column;
}</code>

<code class="HTML"><div class="table">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="row">
    <div class="cell">Column 1 Content</div>
    <div class="cell">Column 2 Content</div>
  </div>
</div></code>

Dalam senario ini, div "col-1" dan "col-2" mewakili lajur jadual tetapi tidak mengandungi sebarang kandungan langsung. Kandungan diletakkan dalam baris.

Atas ialah kandungan terperinci Apakah Tujuan dan Struktur CSS \"display: table-column\"?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!