Bolehkah Anda Menggunakan `position: sticky` untuk Tajuk Jadual di Luar Meja?

Tajuk Jadual Melekat

Keupayaan untuk menjadikan elemen melekit dalam elemen induknya telah diperkenalkan dalam Webkit. Walaupun anda boleh mencapai gelagat melekit untuk tajuk jadual dalam jadual itu sendiri menggunakan JavaScript dan kedudukan mutlak, adalah wajar mempertimbangkan sama ada kedudukan melekit boleh menawarkan penyelesaian yang lebih mudah.

Melakukan kedudukan: berfungsi melekit untuk tajuk jadual di luar meja?

Ya, adalah mungkin untuk membuat tajuk meja melekit di luar meja menggunakan kedudukan melekit. Dengan menambahkan CSS berikut, anda boleh mencapai kesan ini:

<code class="css">thead th {
  position: sticky;
  top: 0;
}</code>

Untuk menggunakan kedudukan melekit bagi tajuk jadual, jadual anda harus mempunyai elemen iklan yang mengandungi elemen ke bagi setiap tajuk lajur. Berikut ialah contoh:

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table body content -->
  </tbody>
</table></code>

Keterbatasan dan Keserasian

Adalah penting untuk ambil perhatian bahawa walaupun kedudukan melekit berfungsi untuk tajuk jadual dalam penyemak imbas moden, keserasian mungkin berbeza-beza merentas peranti berbeza dan pelayar. Menurut caniuse.com, setakat Mac 2018, sokongan untuk kedudukan melekit secara amnya baik di seluruh pelayar moden: https://caniuse.com/#feat=css-sticky

Atas ialah kandungan terperinci Bolehkah Anda Menggunakan `position: sticky` untuk Tajuk Jadual di Luar Meja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!