Rumah >hujung hadapan web >tutorial css >Bagaimanakah cara saya mencipta jadual HTML boleh tatal dengan pengepala tetap?

Bagaimanakah cara saya mencipta jadual HTML boleh tatal dengan pengepala tetap?

Barbara Streisand
Barbara Streisandasal
2024-12-10 02:39:11972semak imbas

How do I create a scrollable HTML table with fixed headers?

Membuat Jadual HTML Boleh Tatal

Dalam HTML, memaparkan jadual boleh tatal menegak boleh dicapai dengan mengikuti langkah berikut:

  1. Balut jadual dalam div: Buat elemen div dan tetapkan Sifat CSS mempunyai kedudukan relatif dan ketinggian tetap untuk mengehadkan ruang menegak yang tersedia untuk jadual.
  2. Tetapkan limpahan kepada auto: Tetapkan sifat limpahan div kepada "auto" untuk mendayakan menegak menatal apabila kandungan jadual melebihi ketinggian div.
  3. Gunakan kedudukan pada pengepala jadual: Jika anda mahu pengepala jadual (kepala) untuk kekal tetap semasa menatal, tetapkan sifat kedudukan elemen iklan kepada "mutlak" dan letakkannya menggunakan sifat CSS atas, kiri atau kanan.
  4. Tetapkan lebar tetap untuk lajur jadual : Pastikan lajur jadual mempunyai lebar tetap untuk mengelakkannya daripada mengubah saiz semasa menatal.

Berikut ialah contoh yang menggabungkan langkah-langkah ini:

<div>

Dalam contoh ini, div "pembungkus meja" mempunyai ketinggian tetap dan limpahan ditetapkan kepada "auto ," membenarkan penatalan menegak. Pengepala jadual (kepala) mempunyai kedudukan mutlak dan ditetapkan di bahagian atas manakala badan jadual (badan) mengandungi data boleh ditatal.

Dengan mengikuti langkah ini, anda boleh mencipta jadual HTML yang mengekalkan saiz yang ditetapkan dengan pengepala tetap, sambil membenarkan badan menatal untuk jumlah data yang berbeza-beza.

Atas ialah kandungan terperinci Bagaimanakah cara saya mencipta jadual HTML boleh tatal dengan pengepala tetap?. 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