Apakah yang sebenarnya dilakukan oleh \'display: table-column\' dalam CSS?

Bagaimanakah CSS "display: table-column" sepatutnya berfungsi?

Dalam HTML, jadual terdiri daripada baris, dengan setiap baris yang mengandungi sel. CSS memanjangkan konsep ini, membenarkan pereka bentuk untuk menentukan susun atur baris dan lajur tertentu. Walaupun "display: table-row" dan "display: table-cell" adalah mudah, "display: table-column" mempunyai tujuan yang lebih bernuansa.

Memahami Fungsi "display: table- column"

Tidak seperti "display: table-row" dan "display: table-cell," "display: table-column" tidak mewujudkan struktur lajur baharu. Sebaliknya, ia menetapkan atribut untuk sel dalam baris jadual sedia ada. Sebagai contoh, anda boleh menentukan warna latar belakang sel pertama dalam setiap baris.

Struktur Jadual HTML lwn. CSS

Untuk memahami konsep ini, pertimbangkan HTML berikut jadual:

<code class="html"><table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table></code>

Sejajar dengan struktur HTML, CSS berikut boleh digunakan:

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

Dalam contoh ini, div ".column1" dan ".column2" bukan bekas untuk kandungan. Mereka hanya mentakrifkan atribut untuk sel dalam baris jadual.

Perkara Penting untuk Diingat

• "display: table-column" menetapkan atribut untuk sel dalam baris jadual , bukan untuk lajur itu sendiri.
• Struktur jadual asas kekal sama seperti dalam HTML, dengan sel menjadi anak baris.
• "display: table-column" tidak menyediakan mekanisme untuk berbilang -reka letak lajur, tempat kandungan mengalir antara lajur.

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