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 .

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </tbody>
</table>

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!