Rumah >hujung hadapan web >tutorial css >Bagaimanakah CSS3 Boleh Membuat DIV Berkembang untuk Mengisi Sel Jadual?

Bagaimanakah CSS3 Boleh Membuat DIV Berkembang untuk Mengisi Sel Jadual?

DDD
DDDasal
2024-12-06 06:56:22213semak imbas

How Can CSS3 Make a DIV Expand to Fill a Table Cell?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn