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

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";

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!