Bagaimanakah saya boleh mencipta jadual pengepala tetap dengan bar skrol mendatar dan menegak yang berfungsi dengan betul dalam HTML, CSS dan JavaScript?

Jadual pengepala tetap dengan bar skrol mendatar dan bar skrol menegak dihidupkan

Ini ialah soalan tentang mencipta jadual pengepala tetap dengan bar skrol mendatar dan menegak menggunakan HTML, CSS dan JavaScript. Masalahnya ialah apabila bar skrol menegak ditambahkan pada jadual, bar skrol menjadi kucar-kacir.

Kod HTML dan CSS yang disediakan mencipta jadual asas dengan pengepala dan badan, tetapi bar skrol tidak berfungsi dengan betul . Kod JavaScript menambah pendengar acara pada bar skrol supaya apabila pengguna menatal jadual, pengepala akan bergerak bersama-sama dengan badan.

Penyelesaian kepada masalah ini ialah menggunakan gabungan HTML, CSS dan JavaScript . Kod HTML mencipta jadual dan pengepala, dan kod CSS menggayakan jadual dan bar skrol. Kod JavaScript menambah pendengar acara pada bar skrol supaya apabila pengguna menatal jadual, pengepala akan bergerak bersama badan.

Berikut ialah kod HTML yang dikemas kini:

    <title>Fixed header table with horizontal scrollbar and vertical scrollbar on</title>
    <link rel="stylesheet" href="style.css">


<div>
<p>Di sini ialah kod CSS yang dikemas kini:</p>
<pre class="brush:php;toolbar:false">body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
table {
    border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
    width: 100%;
}

.outer-container {
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    right: 300px;
    bottom: 40px;