Bagaimana untuk Melaksanakan Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak Menggunakan CSS dan JavaScript?

Jadual Pengepala Tetap dengan Bar Tatal Mendatar dan Bar Tatal Menegak dihidupkan

Soalan ini menangani isu pengepala melekit dan bar skrol dalam jadual HTML/CSS apabila saiz kontena mencapai titik tertentu.

Sedia ada Penyelesaian

Isu ini adalah perkara biasa, dan pelbagai penyelesaian telah dicadangkan, termasuk:

• Memenggal atau menyembunyikan limpahan: Ini boleh dicapai menggunakan sifat CSS seperti limpahan: tersembunyi atau limpahan teks: elipsis. Walau bagaimanapun, ia mungkin tidak menarik secara visual atau mengekalkan data penuh.
• Menggunakan perpustakaan JavaScript: Beberapa perpustakaan JavaScript, seperti DataTables dan ScrollTable, menyediakan penyelesaian untuk mencipta pengepala tetap dan bar skrol dalam jadual . Walau bagaimanapun, penyelesaian ini mungkin memerlukan kod atau kebergantungan tambahan.

Penyelesaian CSS Sahaja

Walaupun CSS tulen tidak dapat mencapai pengepala dan bar skrol tetap sepenuhnya dalam semua senario, ia boleh memberikan penyelesaian separa:

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed */
#header {
  position: sticky;
  top: -1px;
}

Penyelesaian CSS3 (Tidak Disokong dalam IE8)

Untuk kawalan yang lebih baik dan sokongan yang lebih baik, sifat CSS3 boleh digunakan:

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed and set its width */
#header {
  position: sticky;
  top: 0;
  width: 100%;
}

Nota: Penyelesaian ini menganggap bahawa pengepala dan badan jadual mempunyai lebar tetap. Jika lebar tidak ditetapkan, peraturan atau pengiraan CSS tambahan mungkin diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!