Bagaimana untuk Mencipta Jadual HTML Boleh Tatal dengan Pengepala Tetap?

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:

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!