Bolehkah CSS Sendiri Membuat Jadual Boleh Tatal Serasi Silang Penyemak Imbas dengan Pengepala Tetap?

Jadual Boleh Tatal CSS Sahaja dengan Pengepala Tetap

Soalan:

Adakah terdapat penyelesaian CSS sahaja untuk mencipta boleh tatal jadual dengan pengepala tetap iaitu penyemak imbas silang patuh?

Keperluan:

• Kekalkan penjajaran lajur antara baris pengepala, pengaki dan kandungan
• Pastikan pengepala dan pengaki tetap semasa kandungan skrol menegak
• Tiada jQuery atau JavaScript diperlukan
• Gunakan hanya teg berkaitan jadual (jadual, thead, tbody, tr, th, td)

Penyelesaian menggunakan Kedudukan: Sticky:

Nota Keserasian: Semak sokongan untuk kedudukan:melekit sebelum menggunakan ini penyelesaian.

kedudukan:melekat meletakkan elemen relatif kepada nenek moyang menatal terdekat atau port pandangan jika tiada nenek moyang menatal. Tingkah laku ini sejajar dengan pengepala melekit yang diingini.

Walau bagaimanapun, menetapkan kedudukan:melekat pada , , atau tag menghadapi masalah dalam pelbagai pelayar. Sebaliknya, tetapkan sifat melekit kepada sel dalam elemen pembungkus yang mentakrifkan limpahan tatal.

Kod:

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

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

/* Styling */
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 scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">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>
      <!-- additional rows omitted for brevity -->
    </tbody>
  </table>
</div>

Atas ialah kandungan terperinci Bolehkah CSS Sendiri Membuat Jadual Boleh Tatal Serasi Silang Penyemak Imbas dengan Pengepala Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!