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

Paparan seperti jadual untuk Sel dengan Colspan/Rowspan

Pelaksanaan CSS semasa menyediakan sokongan terhad untuk reka letak seperti jadual menggunakan sifat paparan. Khususnya, elemen dengan paparan: sel jadual tidak menyokong atribut colspan atau rowspan.

Kod Contoh:

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

Masalah:

Bagaimana kita boleh mencapai kesan colspan untuk elemen dengan paparan: table-cell?

Penghadan Paparan CSS:

Malangnya, spesifikasi CSS semasa tidak membenarkan colspan atau rowspan pada elemen dengan paparan: table-cell. Seperti yang dinyatakan dalam catatan yang dirujuk, ini adalah pengehadan mod paparan ini.

Alternatif:

Memandangkan CSS tidak memberikan yang setara dengan colspan untuk paparan: jadual- sel, pertimbangkan untuk menggunakan kaedah reka letak alternatif seperti:

• Menggunakan HTML sebenar table
• Menggunakan div berkedudukan mutlak dalam bekas dengan paparan: table
• Meneroka rangka kerja JavaScript seperti Bootstrap yang menyediakan sistem grid untuk susun atur fleksibel

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