Bagaimana untuk Mencipta Pengepala dan Lajur Tetap dalam Jadual Menggunakan Hanya CSS?

Pengepala dan Lajur Tetap dalam Jadual Menggunakan CSS Tulen

Membuat jadual dengan pengepala tetap dan lajur pertama tetap menggunakan CSS tulen boleh dicapai menggunakan kedudukan: sifat melekit. Pendekatan ini lebih cekap dan serasi merentas pelayar daripada penyelesaian yang bergantung pada JavaScript atau jQuery.

Penyelesaian:

1. Balut jadual dalam bekas:

   `

   `

2. Dayakan menatal pada bekas:

   `div.container {
   limpahan: tatal;
   }`

3. Lekatkan meja pengepala:

   `kepala ke {
   kedudukan: -webkit-sticky; / untuk Safari /
   kedudukan: melekit;
   atas: 0;
   }`

4. Lekat lajur pertama:

   `tbody th {
   kedudukan: -webkit-sticky; / untuk Safari /
   kedudukan: melekit;
   kiri: 0;
   }`

5. Pilihan: Melekit pengepala lajur pertama di sebelah kiri atas:

   `kepala ke:anak pertama {
   kiri: 0;
   z-index: 2;
   }`

Nota Tambahan:

• Untuk prestasi optimum, bekas hendaklah mempunyai set lebar dan ketinggian maksimum.
• Jika lajur pertama mengandungi elemen dan bukannya , gunakan tbody td:first-child dalam CSS dan bukannya tbody th.
• Untuk menggayakan pengepala dan lajur pertama dengan lebih lanjut, laraskan sifat CSS mengikut keperluan.

Contoh:

<div class="container">
  <table border="1">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>(555) 123-4567</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>(555) 234-5678</td>
      </tr>
      <!-- More rows... -->
    </tbody>
  </table>
</div>

div.container {
  max-width: 500px;
  max-height: 300px;
  overflow: scroll;
}

thead th {
  position: sticky;
  top: 0;
}

tbody th {
  position: sticky;
  left: 0;
}

thead th:first-child {
  left: 0;
  z-index: 2;
}

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