Bagaimanakah CSS3 Boleh Membuat DIV Berkembang untuk Mengisi Sel Jadual?

Penyelesaian CSS3 untuk Mengisi DIV dalam Sel Jadual

Memperluas soalan klasik untuk membuat DIV mengisi sel jadual, kami menyelidiki ke dalam dunia CSS3 untuk meneroka penyelesaian kontemporari.

The Cabaran

Penyelesaian tradisional, seperti menetapkan lebar dan ketinggian DIV kepada 100%, tidak lagi berfungsi dalam penyemak imbas moden. Kami memerlukan cara yang lebih elegan untuk menyesuaikan diri secara dinamik kepada saiz sel jadual yang berbeza.

CSS3 Savior

CSS3 memperkenalkan konsep sifat "mewarisi" Dengan bijak memanipulasi sifat ketinggian unsur TR (baris jadual) dan TD (data jadual). , kita boleh memaksa DIV dalam TD untuk mengisi keseluruhannya dengan berkesan sel.

Penyelesaian

1. Tentukan TR dengan ketinggian palsu, seperti 1px ketinggian ini diabaikan oleh penyemak imbas.
2. Tetapkan ketinggian TD kepada "warisan", yang memberitahu TD untuk menggunakan ketinggian induknya ( TR).
3. Tetapkan ketinggian DIV kepada "100%."

Teknik ini membolehkan DIV mewarisi ketinggian TD yang diwarisi, yang ditentukan secara dinamik oleh kandungan sel.

Pelayar Keserasian

Penyelesaian ini telah diuji dan disahkan berfungsi dalam kedua-dua IE Edge dan Chrome.

Kod Contoh

<table>

Atas ialah kandungan terperinci Bagaimanakah CSS3 Boleh Membuat DIV Berkembang untuk Mengisi Sel Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!