Bagaimana untuk Menyamakan Lebar Sel Jadual dalam CSS?

Menyamakan Lebar Sel Jadual dalam CSS

Dalam jadual dengan berbilang sel, memastikan lebar yang sama boleh mencabar apabila kandungan dalam setiap sel berbeza-beza. Isu ini timbul apabila cuba menetapkan lebar maksimum, kerana ia memerlukan pengetahuan tentang jumlah sel.

Penyelesaian CSS Tulen

Nasib baik, wujudnya tulen Penyelesaian CSS untuk menyamakan lebar sel jadual, tanpa mengira variasi kandungan. Teknik ini menggunakan sifat CSS berikut:

1. susun atur jadual: tetap;: Sifat ini menguatkuasakan susun atur tetap untuk jadual, memastikan sel menghormati lebar yang ditentukan.
2. Lebar pada setiap sel: Untuk mencetuskan algoritma pengiraan jadual alternatif, kami menetapkan lebar kecil (cth., 2%) pada setiap sel.

Pelaksanaan

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

div > div {
  display: table-cell;
  width: 2%;
}</code>

CSS ini akan memastikan sel jadual mempunyai lebar yang sama, walaupun dengan kandungan yang berbeza.

Pertimbangan Keserasian

Susun atur jadual: tetap; hartanah disokong secara meluas dalam penyemak imbas moden, termasuk Chrome dan IE8 . Walau bagaimanapun, Safari 6 pada OS X melaksanakan sifat ini secara berbeza, yang berpotensi membawa kepada hasil yang tidak dijangka. Sebagai langkah berjaga-jaga, adalah disyorkan untuk menguji penyelesaian anda merentas pelbagai penyemak imbas untuk mengambil kira sebarang kemungkinan isu keserasian.

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