Bagaimana Mengekalkan Pengepala Jadual HTML Kelihatan Semasa Menatal Badan?

Cara untuk memaparkan bar skrol pada jadual html

Apabila mencipta jadual HTML, kadangkala pengepala perlu kekal kelihatan, walaupun semasa kandungan jadual ditatal.

Untuk mencapai matlamat ini, balut jadual dalam div yang tidak diposisikan secara statik yang mempunyai limpahan:auto sifat CSS. Kemudian, letakkan elemen dalam kepala jadual secara mutlak, seperti yang dilihat di bawah:

#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;
}

<div>

Ini akan mencipta jadual dengan pengepala tetap dan badan tatal, serupa dengan kaedah 2 dalam URL yang disediakan.

Atas ialah kandungan terperinci Bagaimana Mengekalkan Pengepala Jadual HTML Kelihatan Semasa Menatal Badan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!