Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Melaksanakan Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak Menggunakan CSS dan JavaScript?

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

Patricia Arquette
Lepaskan: 2024-12-04 05:01:11
asal
305 orang telah melayarinya

How to Implement a Fixed Header Table with Horizontal and Vertical Scrollbars Using CSS and 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;
}
Salin selepas log masuk

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

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!

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