Bagaimana untuk Mencapai Lebar Lajur Fleksibel dalam Jadual menggunakan CSS Calc() dan Table-Layout?

Lebar Lajur Fleksibel dalam Jadual dengan CSS Calc

Dalam mengejar jadual dengan kedua-dua lajur lebar tetap dan lebar fleksibel, menggunakan Fungsi CSS calc() sahaja mungkin gagal. Jadual menguatkuasakan peraturan khusus untuk pengagihan ruang berdasarkan kandungan sel, menjadikannya mencabar untuk calc() untuk mengagihkan ruang yang tersedia secara sama rata.

Untuk mengatasi halangan ini, kita boleh menggunakan atribut susun atur jadual yang ditetapkan kepada tetap untuk elemen jadual. Ini memastikan elemen anak td mematuhi lebar yang kami tentukan. Selain itu, lebar (cth., 100%) mesti dinyatakan untuk jadual.

Untuk reka letak jadual berkuat kuasa, jadual juga mesti mempunyai jenis paparan jadual. Ini ialah tetapan lalai dan biasanya ditinggalkan. Walau bagaimanapun, ia disertakan di sini untuk kesempurnaan.

Kini, kita boleh menggunakan peratusan secara bebas untuk melaraskan lebar lajur yang tinggal. Contohnya:

td.title, td.interpret {
  width: 40%;
}

td.album {
  width: 20%;
}

Baki ruang selepas mengambil kira lajur lebar tetap diagihkan antara lajur dengan lebar relatif.

Satu kaveat yang perlu diambil perhatian ialah menggunakan paparan: jadual untuk jadual bermakna kita tidak lagi boleh menentukan ketinggian (atau ketinggian min atau ketinggian maks) untuk jadual.

Di bawah ialah contoh diubah suai yang menggabungkan pembetulan ini:

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Lebar Lajur Fleksibel dalam Jadual menggunakan CSS Calc() dan Table-Layout?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!