Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membuat Elemen DIV Mengisi Sel Jadual Menggunakan Hanya CSS?

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

Mary-Kate Olsen
Lepaskan: 2024-12-02 18:29:14
asal
967 orang telah melayarinya

How Can I Make a DIV Element Fill a Table Cell Using Only 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%; }
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan