Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Jadual HTML Boleh Tatal dengan Pengepala Tetap?

Bagaimana untuk Mencipta Jadual HTML Boleh Tatal dengan Pengepala Tetap?

Patricia Arquette
Patricia Arquetteasal
2024-12-08 03:03:10780semak imbas

How to Create a Scrollable HTML Table with Fixed Headers?

Cara Menambat Pengepala dalam Jadual HTML Boleh Tatal

Menggabungkan kedua-dua pengepala jadual tetap dan badan jadual boleh tatal boleh menjadi keperluan biasa dalam aplikasi web . Walau bagaimanapun, mencari penyelesaian yang berkesan boleh menjadi mencabar. Panduan ini akan meneroka penyelesaian kepada isu ini, membimbing anda melalui pelaksanaan.

Penyelesaian

Untuk mencapai fungsi ini, anda boleh menggunakan gabungan CSS dan JavaScript teknik. Penyelesaian yang popular ialah menggunakan teknik yang dikenali sebagai tatal dua kali. Ini melibatkan mencipta dua jadual bersarang: jadual luar yang mengandungi pengepala tetap dan jadual dalaman boleh tatal untuk badan jadual.

Persediaan CSS

Pertama, tentukan penggayaan CSS untuk jadual:

/* Outer table (fixed header) */
#outer-table {
  width: 100%;
  height: 100px; /* Set a fixed height for the header */
  overflow: hidden;
}

/* Inner table (scrollable body) */
#inner-table {
  height: calc(100% - 100px); /* Calculate the height based on the outer table's height */
  overflow-y: scroll;
}

JavaScript Persediaan

Seterusnya, gunakan JavaScript untuk melaraskan ketinggian jadual dalaman secara dinamik:

const outerTable = document.getElementById('outer-table');
const innerTable = document.getElementById('inner-table');

// Calculate the inner table's height based on the outer table's height
innerTable.style.height = `${outerTable.clientHeight - 100}px`;

Contoh

Untuk contoh yang berfungsi, rujuk kepada sampel kod berikut:

<table>

Penyelesaian ini secara berkesan membekukan pengepala jadual semasa membenarkan badan meja menatal dengan lancar. Dengan melaksanakan teknik ini, anda boleh membuat jadual responsif dan interaktif yang memenuhi keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk 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