Bagaimana Saya Boleh Mensimulasikan colspan dan rowspan dengan CSS `display: table-cell`?

Melaksanakan Gelagat Seperti Jadual: Menangani Ketiadaan Colspan dan Rowspan dalam Paparan CSS: Table-Cell

Pembangunan web moden selalunya melibatkan elemen penggayaan untuk berkelakuan seperti jadual. Menggunakan sifat CSS seperti paparan: jadual dan paparan: sel jadual, pembangun boleh mencapai reka letak seperti jadual. Walau bagaimanapun, terdapat had untuk mensimulasikan ciri asas colspan dan rowspan.

Pertimbangkan kod HTML dan CSS berikut:

HTML:

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
  <div class="row">
    <div class="cell colspan2">Cell</div>
  </div>
</div>

CSS:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.colspan2 {
  /* What to do here? */
}

Matlamatnya ialah untuk menjadikan "Sel" dalam rentang baris kedua merentas dua lajur. Malangnya, tiada persamaan langsung dengan colspan atau rowspan untuk elemen CSS dengan paparan: table-cell.

Seperti penyelidikan, had ini berpunca daripada fakta bahawa paparan: mod susun atur jadual bukanlah pelaksanaan penuh model jadual HTML. Ia meniru tingkah laku seperti jadual tertentu, tetapi bukan semua. Oleh itu, kami tidak mempunyai keupayaan untuk mentakrifkan colspan atau rowspan secara eksplisit.

Dalam senario sedemikian, adalah disyorkan untuk meneroka pendekatan alternatif untuk mencapai reka letak seperti jadual yang diingini tanpa bergantung pada paparan: table. Satu penyelesaian yang mungkin adalah menggunakan flexbox. Berikut ialah contoh:

CSS:

.flex-table {
  display: flex;
  flex-direction: row;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-cell {
  display: flex;
  flex: 1 0 auto;
}

.colspan2 {
  flex: 2 0 auto;
}

Penyelesaian ini melibatkan penggunaan flexbox untuk mencipta reka letak seperti jadual sambil masih menyediakan sokongan untuk colspan dan rowspan. Walau bagaimanapun, ambil perhatian bahawa penyemak imbas yang berbeza mungkin menyebabkan reka letak sedikit berbeza. Adalah dinasihatkan untuk menguji kod secara menyeluruh merentas penyemak imbas untuk memastikan hasil yang konsisten.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mensimulasikan colspan dan rowspan dengan CSS `display: table-cell`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!