Bagaimana untuk Mencapai Pengepala Tetap dan Lajur Tetap dalam Jadual HTML?

Mencapai Pengepala Tetap dan Lajur Tetap dalam Jadual HTML

Dalam pembangunan web, memaparkan jadual HTML yang besar boleh mencabar apabila menatal diperlukan semasa mengekalkan keterlihatan maklumat penting. Nasib baik, gabungan teknik CSS dan JavaScript boleh memberikan penyelesaian dengan membetulkan pengepala lajur di bahagian atas skrin dan memastikan lajur pertama tetap semasa anda menatal melalui data jadual.

Satu pendekatan berkesan yang telah ditunjukkan dalam contoh yang berfungsi ialah menggunakan position atribut CSS:sticky untuk menetapkan pengepala lajur pada tempatnya. Dengan menetapkan sifat ini ke atas, pengepala akan kekal kelihatan di bahagian atas skrin semasa menatal.

Untuk membetulkan lajur pertama, pemalam JavaScript "stickyTableHeaders" boleh digunakan. Pemalam ini mencipta klon bagi kandungan lajur pertama dan meletakkannya menggunakan helah CSS untuk mencapai kesan tetap yang diingini.

Berikut ialah contoh cara ini boleh dilaksanakan:

<code class="html"><table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table data -->
  </tbody>
</table></code>

<code class="css">#myTable {
  width: 100%;
  border-collapse: collapse;
}

#myTable thead {
  position: sticky;
  top: 0;
}</code>

<code class="javascript">// Use the stickyTableHeaders plugin to fix the first column
$('#myTable').stickyTableHeaders();</code>

Dengan menggabungkan teknik ini, anda boleh membuat jadual HTML dengan pengepala tetap dan lajur tetap, memastikan maklumat penting kekal kelihatan semasa menatal.

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