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

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

Barbara Streisand
Lepaskan: 2024-11-28 16:28:11
asal
828 orang telah melayarinya

How to Implement a Fixed Header Table with Both Horizontal and Vertical Scrollbars?

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

Isu yang anda hadapi timbul apabila anda menambah bar skrol menegak pada tetapan anda jadual pengepala. Bar skrol menegak mengganggu kedudukan bar skrol mendatar, kerana kedua-duanya bercanggah untuk ruang dalam bekas luar.

Struktur HTML dan CSS

HTML dan CSS yang anda sediakan struktur adalah titik permulaan yang baik. HTML terdiri daripada struktur jadual bersarang, dengan jadual pengepala ditetapkan kepada kedudukan tetap dan jadual badan ditetapkan kepada limpahan-y: tatal. CSS mentakrifkan gaya untuk elemen jadual, termasuk ketinggian dan lebar tetap untuk sel pengepala dan sel badan.

Penyelesaian

Untuk menyelesaikan isu dan mempunyai kedua-dua mendatar dan bar skrol menegak berfungsi dengan betul, kita boleh menggunakan gabungan CSS dan JavaScript:

  1. CSS:

    • Alih keluar limpahan-x: tatal; harta daripada .bekas dalam.
    • Tambahkan kelas pada .bekas dalam dengan lebar tertentu, sebut "bekas tatal".
  2. JavaScript:

    • Gunakan JavaScript untuk mengira lebar bekas .scroll dan tetapkan lebar badan .table kepada lebar itu. Ini memastikan bahawa jadual badan mempunyai lebar yang betul untuk diselaraskan dengan jadual pengepala dan mengelakkan isu bar skrol mendatar.

Kod Contoh

Berikut ialah contoh yang dikemas kini kod:

/* CSS */
.scroll-container {
  width: 100%;
}

/* JavaScript */
var scrollContainer = document.querySelector(".scroll-container");
var tableBody = document.querySelector(".table-body");
tableBody.style.width = scrollContainer.offsetWidth + "px";
Salin selepas log masuk

Penjelasan

Dengan mengalih keluar sifat limpahan-x daripada .inner-container dan menetapkan lebar tertentu melalui JavaScript, kami memastikan bahawa .table-body mempunyai lebar yang betul untuk menampung kedua-dua penatalan mendatar dan menegak. Penjajaran ini menghalang bar skrol menegak daripada mengganggu bar skrol mendatar dan membolehkan kedua-duanya berfungsi dengan betul.

Penyelesaian Alternatif

Selain itu, terdapat penyelesaian lain yang boleh anda pertimbangkan:

  • Gunakan Grid CSS atau Flexbox untuk susun atur untuk mencapai yang lebih fleksibel dan responsif reka bentuk.
  • Teroka menggunakan pustaka CSS seperti Bootstrap atau Materialize, yang menyediakan komponen dan gaya pra-bina yang boleh memudahkan pelaksanaan fungsi ini.

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

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