Bagaimanakah \'display: table-column\' berfungsi dalam CSS?

Peranan "display: table-column" dalam CSS

Dalam artikel ini, kita akan meneroka cara "display: table- column" berfungsi dalam CSS.

Model jadual CSS sejajar dengan model jadual HTML, di mana baris dan sel adalah komponen asas. "display: table-column" sahaja tidak boleh membuat reka letak lajur.

Sebaliknya, ia menetapkan atribut khusus untuk sel dalam baris jadual. Sebagai contoh, ia boleh menentukan warna latar belakang sel pertama dalam setiap baris.

Dalam HTML, struktur jadual adalah seperti berikut:

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

Menggunakan sifat jadual CSS, HTML yang sepadan ialah:

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

Dengan memahami hubungan antara lajur dan baris dalam model jadual CSS, pembangun boleh mencipta reka letak seperti jadual dan mengawal atribut khusus sel dengan berkesan.

Atas ialah kandungan terperinci Bagaimanakah \'display: table-column\' berfungsi dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!