Bagaimana untuk Mencipta Jadual Boleh Tatal dengan Pengepala Tetap Menggunakan CSS?

Cara Membuat Jadual Boleh Tatal dengan CSS dan Pengepala Tetap

Dalam pembangunan web, selalunya perlu mencipta jadual dengan jumlah data yang besar yang memerlukan tatal. Walau bagaimanapun, mengekalkan pengepala tetap semasa menatal badan jadual boleh menjadi mencabar. Begini cara anda boleh mencapai kesan ini:

Struktur HTML

Pertama, kita mesti memastikan struktur HTML kita betul. Kami mempunyai div luar dengan bar skrol, div dalam yang mengandungi jadual dan pengepala jadual harus berada dalam data elemen dan jadual dalam elemen.

<div>
<p><strong>Gaya CSS</strong></p>
<p>Sekarang, kita perlu menggayakan jadual menggunakan CSS:</p>
<pre class="brush:php;toolbar:false">/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}

Pertimbangan Tambahan

Pastikan semua pengepala dan sel data disertakan dalam

elemen untuk penjajaran yang betul. Jika anda mahukan lebar lajur yang berbeza-beza, gunakan pemilih anak ke-n dalam CSS.

Nota: Pendekatan ini sesuai untuk jadual yang lebih kecil. Untuk jadual yang sangat besar, pertimbangkan untuk menggunakan teknik yang berbeza, seperti virtualisasi atau pustaka pihak ketiga.