Bagaimana untuk Menambah Bar Tatal pada Jadual HTML Sambil Mengekalkan Pengepala Tetap?

Memaparkan Bar Tatal pada Jadual HTML

Untuk memaparkan bar skrol pada jadual HTML, pertimbangkan pendekatan berikut:

Balut Meja dalam Div Berposisi

Sisipkan meja dalam elemen div dengan kedudukan relatif atau mutlak. Div ini akan bertindak sebagai bekas untuk kawasan boleh tatal.

Tetapkan Limpahan kepada Auto pada Div

Gunakan CSS limpahan harta:auto ke div kontena. Ini membenarkan limpahan kandungan apabila jadual melebihi sempadannya.

#table-container { limpahan: auto; }

Kedudukan Pengepala Jadual Sama sekali

Untuk memastikan pengepala jadual tetap semasa menatal, letakkan elemen thead secara mutlak.

#table-header { kedudukan : mutlak; }

Tetapkan Ketinggian untuk Bekas

Nyatakan ketinggian untuk div kontena untuk menentukan kawasan boleh tatal.

#table-container { height: 400px; }

Contoh Pelaksanaan

<div>
<pre class="brush:php;toolbar:false">#table-container {
  height: 400px;
  overflow: auto;
}

#table-header {
  position: absolute;
}

Pendekatan ini menyediakan bar skrol sambil mengekalkan pengepala jadual tetap di bahagian atas.