Rumah > hujung hadapan web > tutorial css > Bagaimana Mengekalkan Pengepala Meja Tetap Semasa Menatal Badan Meja?

Bagaimana Mengekalkan Pengepala Meja Tetap Semasa Menatal Badan Meja?

Susan Sarandon
Lepaskan: 2024-12-18 18:22:12
asal
787 orang telah melayarinya

How to Keep Table Headers Fixed While Scrolling the Table Body?

Membetulkan Pengepala Jadual dengan Badan Tatal

Mengekalkan pengepala jadual tetap sambil membenarkan badan menatal adalah keperluan biasa dalam pembangunan web. Untuk mencapai matlamat ini, gunakan pendekatan berikut:

1. Balut Kandungan Jadual dalam Dua Elemen Bersarang:

  • Buat elemen jadual luar (cth., #mainTable) untuk menampung keseluruhan jadual.
  • Buat elemen jadual dalam (cth. , #innerTable) untuk mengandungi badan jadual yang perlu tatal.

2. Tetapkan Ketinggian Jadual Luar:

  • Gunakan ketinggian tetap pada jadual luar menggunakan CSS (cth., #mainTable { height: 500px; }).

3. Kedudukan Jadual Dalam:

  • Letakkan jadual dalam secara mutlak dalam jadual luar menggunakan CSS (cth., #innerTable { position: absolute; atas: 0; bawah: 0; lebar: 100%; }).

4. Betulkan Pengepala:

  • Gunakan kedudukan: melekit; ke baris pengepala jadual dalam (cth., #innerTable th { position: sticky; top: 0; }).

5. Dayakan Tatal:

  • Pastikan ketinggian jadual dalam melebihi ketinggian jadual luar, mencetuskan limpahan menegak.
  • Dayakan tatal pada jadual dalam menggunakan CSS (cth., #innerTable { limpahan: auto; }).

Contoh:

<div>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana Mengekalkan Pengepala Meja Tetap Semasa Menatal Badan Meja?. 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