Bagaimana untuk Mencipta Jadual HTML Boleh Tatal dengan Pengepala Tetap dan Lajur Pertama?

Mencipta Jadual HTML Boleh Tatal dengan Pengepala Tetap dan Lajur Pertama

Bagaimanakah anda membuat jadual HTML dengan pengepala lajur tetap dan lajur pertama yang kekal kelihatan semasa menatal kandungan jadual?

Jawapan:

Untuk mencapai kesan ini, anda boleh menggunakan gabungan CSS dan JavaScript. Begini cara anda boleh melakukannya:

1. Cipta Jadual HTML:

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
      <th>Column 3 Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- more table rows -->
  </tbody>
</table></code>

2. CSS untuk Pengepala Tetap dan Lajur Pertama:

<code class="css">table {
  width: 100%;
  overflow: scroll;
}

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

table tr td:first-child {
  position: sticky;
  left: 0;
}</code>

CSS ini memastikan bahawa pengepala jadual ditetapkan pada bahagian atas skrin semasa menatal dan lajur pertama kekal di sebelah kiri.

3. Contoh Dipertingkat:

Anda juga boleh menggunakan Grid CSS lanjutan untuk mencapai kesan yang sama dengan sokongan yang lebih baik untuk responsif dan pembaca skrin:

<code class="css">table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto 1fr;
}

table thead {
  grid-row: 1;
  grid-column: 1 / -1;
}

table tr {
  grid-column: 1 / -1;
}

table tr td:first-child {
  grid-column: 1;
}

table tbody {
  overflow: scroll;
}</code>

Nota: Contoh yang diberikan mungkin memerlukan beberapa pelarasan bergantung pada reka bentuk jadual khusus anda dan keperluan keserasian penyemak imbas.

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