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:
CSS:
JavaScript:
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:
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!