Bagaimanakah Saya Boleh Membuat Elemen DIV Mengisi Sel Jadual Menggunakan Hanya CSS?

Menggunakan CSS untuk Membuat DIV Mengisi Sel Jadual

Satu cabaran biasa dalam pembangunan web ialah mendapatkan elemen DIV untuk menduduki seluruh ruang dalam sel meja. Walaupun kemajuan dalam CSS3, isu ini berterusan selama bertahun-tahun. Artikel ini meneroka penyelesaian berasaskan CSS untuk masalah ini, yang menampung dimensi sel jadual dinamik.

Pendekatan tradisional untuk menetapkan lebar dan ketinggian DIV kepada 100% selalunya tidak berkesan kerana sel jadual secara semula jadi tidak meregang untuk dimuatkan kandungan mereka. Sebaliknya, kita perlu memanipulasi sifat jadual dan sel untuk mencapai hasil yang diingini.

Godam CSS berikut menyediakan cara yang mudah dan cekap untuk membuat DIV mengisi keseluruhan sel jadual:

tr { height: 1px; }
td { height: inherit; }
div { height: 100%; }

Dalam kod ini, kami menetapkan baris jadual (TR) untuk mempunyai ketinggian minimum 1px (yang biasanya diabaikan oleh penyemak imbas). Kemudian, kami menetapkan sel jadual (TD) untuk mewarisi ketinggiannya daripada baris, memastikan ia meregang secara menegak untuk menampung DIV. Akhir sekali, kami menetapkan ketinggian DIV kepada 100%, menyebabkan ia menduduki keseluruhan ruang yang tersedia dalam sel jadual.

Penyelesaian ini telah diuji dan disahkan berfungsi dalam kedua-dua pelayar IE Edge dan Chrome, dengan berkesan menangani masalah isu mengisi DIV dengan keseluruhan ketinggian dan lebar sel jadual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen DIV Mengisi Sel Jadual Menggunakan Hanya CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!