Bagaimanakah saya boleh membuat jadual boleh tatal dengan pengepala tetap menggunakan CSS sahaja?

Jadual Boleh Tatal CSS Sahaja dengan Pengepala Tetap

Soalan ini memerlukan penyelesaian CSS sahaja untuk mencipta jadual boleh tatal dengan pengepala tetap. Keperluan untuk penyelesaian ini termasuk:

1. Kekalkan penjajaran lajur merentas baris pengepala, pengaki dan kandungan
2. Benarkan pengepala dan pengaki kekal tetap semasa kandungan menatal secara menegak
3. Gunakan hanya teg HTML berkaitan jadual (jadual, tr, th, td, dsb.) tanpa JavaScript atau jQuery

Penyelesaian Menggunakan Kedudukan: Melekit

Satu penyelesaian yang mungkin melibatkan penggunaan kedudukan: sifat melekit. Begini caranya:

Penggunaan kedudukan: melekit

Kedudukan melekit memberikan elemen kepada kedudukan relatif kecuali offset dikira berkenaan nenek moyang terdekat dengan menatal kotak atau tempat pandang jika tiada moyang sedemikian. Tingkah laku ini sesuai untuk pengepala jadual tetap.

Kod

Kod berikut menunjukkan teknik ini:

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* == Just general styling, not relevant :) == */

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <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>
    <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>
    <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>
    <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>
  </table>
</div>

Kod ini coretan meletakkan jadual dalam div pembalut dengan bar skrol. Dengan menetapkan kedudukan: melekat pada elemen ke dalam pengepala jadual, pengepala kekal tetap apabila kandungan menatal secara menegak.

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