Bagaimana untuk Mencipta Pengepala dan Lajur Tetap dalam Jadual HTML?

Mencipta Jadual HTML dengan Pengepala dan Lajur Tetap

Apabila bekerja dengan jadual HTML yang besar, ia boleh mengecewakan untuk kehilangan jejak pengepala lajur yang penting dan data baris semasa anda menatal. Syukurlah, terdapat teknik CSS dan JavaScript untuk mencipta pengepala dan lajur tetap, memastikan navigasi mudah.

Cara Mencapai Pengepala Tetap dan Lajur Tetap:

Untuk mencapai matlamat ini , kita boleh menggunakan pendekatan berikut:

1. Buat Pengepala Tetap: Gunakan CSS untuk membetulkan elemen dalam kedudukan menggunakan kedudukan: sifat melekit. Ini akan memastikan pengepala kelihatan di bahagian atas jadual semasa anda menatal.
2. Betulkan Lajur Pertama: Untuk membetulkan lajur pertama, buat
   yang membungkus sel lajur pertama. Tetapkan kedudukan

   kepada melekit dan harta kiri kepada 0. Ini menambat lajur ke tepi paling kiri port pandangan.

Contoh Pelaksanaan:

Berikut ialah contoh kod untuk mencapai kesan ini:

<code class="html"><style>
  thead {
    position: sticky;
    top: 0;
  }

  .fixed-column {
    position: sticky;
    left: 0;
  }
</style>

<table>
  <thead>
    <tr>
      <th class="fixed-column">ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <!-- Data rows -->
  </tbody>
</table></code>

Nota: Contoh yang disediakan dalam jawapan pada jsBin menunjukkan pelaksanaan yang berkesan bagi teknik ini. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pendekatan ini mungkin mempunyai had atau memerlukan pelarasan berdasarkan keperluan keserasian penyemak imbas tertentu.

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