Bagaimana untuk Mencipta Jadual Boleh Tatal dengan Pengepala Tetap Hanya Menggunakan CSS?

Jadual Boleh Tatal dengan Pengepala Tetap Menggunakan CSS

Penyelesaian CSS Sahaja untuk Pengepala Tetap

Masalah:

Buat jadual boleh tatal dengan pengepala tetap dan pengaki hanya menggunakan CSS dan teg jadual yang sah, tanpa memerlukan JavaScript atau jQuery. Pastikan penjajaran lajur kekal konsisten antara baris pengepala, pengaki dan kandungan.

Penyelesaian:

Kedudukan penggunaan: melekit

1. Balut jadual dalam div: Ini akan mentakrifkan kawasan skrol.

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

   Salin selepas log masuk

2. Gunakan kedudukan: melekat pada pengepala jadual:

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

   Salin selepas log masuk

Penggayaan

Sesuaikan penampilan meja sebagai diperlukan:

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;
}

Contoh:

<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>
      <!-- Insert rows here -->
    </tbody>
  </table>
</div>

Nota:

• Semak keserasian dengan kedudukan: melekit sebelum menggunakan penyelesaian ini menggunakan sumber seperti CanIUse.
• Dalam sesetengah penyemak imbas, pengepala mungkin tidak selaras dengan kandungannya. Laraskan nilai teratas dalam sifat melekit jika perlu.
• Penyelesaian ini membenarkan penatalan menegak sahaja. Penatalan mendatar tidak disokong.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jadual Boleh Tatal dengan Pengepala Tetap Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!