Bagaimana untuk Mencipta Pengepala dan Lajur Tetap dalam Jadual HTML?

Mary-Kate Olsen
Lepaskan: 2024-11-03 21:29:03
asal
1051 orang telah melayarinya

How to Create Fixed Headers and Columns in HTML Tables?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan