Bagaimana untuk Membuat Sel Jadual Sama Lebar Menggunakan CSS?

Sel Jadual Sama Lebar dengan CSS

Soalan:

Bagaimana kita boleh membuat tak tentu bilangan elemen sel jadual dalam bekas jadual mempunyai lebar yang sama, tanpa mengira saiz kandungannya?

Jawapan:

Ya, adalah mungkin untuk mencapai ini menggunakan CSS tulen .

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment */
}</code>

Begini cara ia berfungsi:

1. Tetapkan reka letak jadual: tetap; pada bekas div induk. Ini mengaktifkan algoritma reka letak jadual yang mana jadual cuba mengekalkan dimensi yang ditentukan.
2. Tetapkan lebar pada setiap div (sel jadual). Dalam contoh ini, kami telah menetapkannya kepada 2%, tetapi anda boleh melaraskannya mengikut keperluan anda.
3. Lebar ini mencetuskan gelagat susun atur jadual tetap dan penyemak imbas akan memperuntukkan lebar secara sama rata pada setiap sel, memastikan mereka mempunyai lebar yang sama tanpa mengira saiz kandungannya.

Nota Tambahan:

• Penyelesaian ini serasi dengan Chrome dan IE8 .
• Sedia maklum bahawa Safari 6 pada macOS mempunyai tafsiran yang berbeza tentang susun atur jadual: tetap;. Ini boleh membawa kepada hasil yang berbeza dalam penyemak imbas itu.
• Anda boleh menetapkan lebar tetap kepada div induk (jadual) untuk mengawal lebar keseluruhan jadual. Jika anda tidak menentukan lebar, ia akan lalai kepada 100%.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Sel Jadual Sama Lebar Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!