Mengapa \'display: table-column\' tidak berfungsi seperti yang dijangkakan dalam Reka Letak Jadual CSS?

Mengapa "display: table-column" Tidak Berfungsi dalam Reka Letak CSS Saya?

Memandangkan kod HTML dan CSS yang disediakan, anda mungkin mengharapkan untuk melihat reka letak dengan dua lajur ("colLeft" dan "colRight") dan tiga baris ("row1", "row2", dan "row3"). Walau bagaimanapun, dalam penyemak imbas seperti Chrome dan IE, keseluruhan reka letak runtuh kepada saiz sifar.

Tingkah laku ini timbul daripada salah faham asas tentang cara model jadual CSS berfungsi. Walaupun ia menyerupai model jadual HTML, terdapat perbezaan penting:

• Lajur Bukan Bekas Langsung: Dalam jadual HTML, lajur ("") tidak langsung mengandungi sel. Sebaliknya, sel ("") ialah anak baris (""). Struktur ini dikekalkan dalam model jadual CSS.
• "display: table-column" Mentakrifkan Atribut Sel: Menggunakan "display: table-column" pada elemen tidak menghasilkan lajur dalam pengertian tradisional. Sebaliknya, ia menetapkan atribut yang digunakan pada sel dalam baris jadual. Contohnya, anda boleh menggunakannya untuk menentukan warna latar belakang sel pertama dalam setiap baris.
• Struktur Jadual Standard: Struktur keseluruhan jadual kekal sama seperti dalam HTML. Baris mengandungi sel dan lajur tidak mengandungi sebarang kandungan langsung.

Struktur HTML dan CSS yang Betul:

Untuk mencipta reka letak jadual CSS yang sah, anda harus gunakan struktur berikut:

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

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

Atas ialah kandungan terperinci Mengapa 'display: table-column' tidak berfungsi seperti yang dijangkakan dalam Reka Letak Jadual CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!