Bolehkah anda mencipta sel jadual lebar yang sama dengan kandungan yang berbeza-beza menggunakan CSS semata-mata?

Sel Jadual Lebar Sama dengan Kandungan Boleh Ubah

Pertimbangkan senario di mana anda mempunyai berbilang elemen sel jadual di dalam bekas meja. Walaupun mempunyai saiz kandungan yang berbeza, anda mahu sel jadual ini mempunyai lebar yang sama. Adakah terdapat penyelesaian CSS semata-mata untuk mencapai ini?

Penyelesaian:

Untuk mencapai sel jadual lebar yang sama tanpa mengira saiz kandungan, anda boleh menggunakan pendekatan CSS berikut :

1. Reka Letak Jadual Tetap: Guna susun atur jadual: tetap; kepada div induk yang mewakili jadual. Ini pada asasnya mengarahkan penyemak imbas untuk mematuhi dengan ketat pada lebar sel yang ditentukan.
2. Lebar Sel Minimum: Tetapkan lebar minimum, walaupun kecil seperti 2%, untuk setiap sel (div > div). Ini mencetuskan algoritma reka letak jadual yang diingini, di mana penyemak imbas cuba menghormati dimensi sel yang ditentukan.

Contoh Kod:

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

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

Nota :

Penyelesaian ini berfungsi dengan Chrome, IE8 dan Safari 6 (dengan beberapa kaveat). Walau bagaimanapun, adalah penting untuk diingat bahawa Safari 6 mungkin mempunyai gelagat susun atur jadual yang berbeza berbanding penyemak imbas lain.

Atas ialah kandungan terperinci Bolehkah anda mencipta sel jadual lebar yang sama dengan kandungan yang berbeza-beza menggunakan CSS semata-mata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!