Bagaimana untuk Menjadikan Pengepala Jadual HTML Kekal Kelihatan Apabila Menatal?

Menggunakan Div Pembungkus untuk Memaparkan Bar Skrol pada Jadual HTML

Apabila mencipta jadual HTML, mungkin perlu untuk memaparkan bar skrol untuk benarkan kandungan jadual dilihat walaupun saiz jadual melebihi bekasnya.

Untuk mencapai ini, bungkus jadual dalam kedudukan tidak statik <div> elemen dan tetapkan limpahan:auto CSS harta padanya. Ini mewujudkan kawasan boleh tatal untuk kandungan jadual.

Untuk memastikan pengepala jadual (terletak di bahagian ) kelihatan semasa menatal, letakkannya secara mutlak dan letakkannya di atas kawasan tatal. Ini menghalang pengepala daripada disembunyikan oleh kandungan boleh ditatal.

Berikut ialah contoh yang menggabungkan kedua-dua bar skrol dan pengepala tetap:

CSS:

#table-wrapper {
  position: relative;
}
#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}
#table-wrapper table {
  width: 100%;
}
#table-wrapper table * {
  background: yellow;
  color: black;
}
#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

HTML:

<div>

Dengan menggunakan teknik ini, anda boleh mencipta jadual HTML yang membolehkan menatal sambil mengekalkan pengepala kelihatan, seperti yang ditunjukkan dalam contoh yang disediakan oleh pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Pengepala Jadual HTML Kekal Kelihatan Apabila Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!