Bagaimanakah cara saya mencipta jadual boleh tatal dengan pengepala tetap menggunakan CSS?

Menyediakan Jadual Boleh Tatal dengan Pengepala Tetap Menggunakan CSS

Jadual anda mempunyai kedua-dua badan boleh tatal dan pengepala tetap, tetapi anda tidak pasti cara untuk mencapai kesan ini . Untuk menyelesaikannya, kami memisahkan elemen pengepala dan badan dalam HTML menggunakan dan

.

head1	head2	head3	head4
row 1, cell 1	row 1, cell 2	row 1, cell 2	row 1, cell 2
row 2, cell 1	row 2, cell 2	row 1, cell 2	row 1, cell 2

Seterusnya, kami menetapkan paparan: blok untuk dan untuk memisahkan tingkah laku mereka dan membolehkan menatal pada badan tanpa menjejaskan pengepala.

table tbody, table thead {
  display: block;
}

Kami mentakrifkan sifat limpahan dan ketinggian untuk badan:

table tbody {
  overflow: auto;
  height: 100px;
}

Memandangkan pengepala dan badan adalah dipisahkan secara visual tetapi dipautkan secara teknikal, kami menetapkan lebar statik untuk

dan elemen untuk memastikan penjajaran lajur yang betul.

th {
  width: 72px;
}

td {
  width: 72px;
}

Ingat untuk memasukkan pemformatan HTML yang betul, seperti

untuk setiap baris, termasuk baris pengepala.

<tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
</tr>

Atas ialah kandungan terperinci Bagaimanakah cara saya mencipta jadual boleh tatal dengan pengepala tetap menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!