テーブルの上下に水平スクロールバーをつける

CSS

#containar {
    width: 100%;
}
.scrollbar {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
.bar_inner {
    height: 1px;
}
.scrollbox {
    width: 100%;
    margin-top: 5px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.box_inner {
    margin-bottom: 5px;
}

HTML

<div id="containar">
    <!-- 上のスクロールバー -->
    <div class="scrollbar" id="scrollbar">
        <div class="bar_inner"></div>
    </div>    
    
    <!-- スクロールさせる本体 -->
    <div class="scrollbox" id="scrollbox">
        <div class="box_inner">

            <table>

            </table>
        </div>
    </div>
</div>

JS

document.addEventListener("DOMContentLoaded", function () {
    // `scrollbar` と `scrollbox` のスクロールイベントを設定
    const scrollbar = document.getElementById("scrollbar");
    const scrollbox = document.getElementById("scrollbox");

    // スクロールバーの表示をチェックする関数
    function toggleScrollbar() {
        if (scrollbox.scrollWidth > scrollbox.clientWidth) {
            // 下のスクロールバーが表示されている場合のみ、上のスクロールバーも表示
            scrollbar.style.display = '';
            document.querySelector('.bar_inner').style.width = scrollbox.scrollWidth + "px"; // 上下の幅を同じに
        } else {
            // 下のスクロールバーがない場合、上のスクロールバーを非表示
            scrollbar.style.display = 'none';
        }
    }

    // ページ読み込み時とウィンドウリサイズ時にチェック
    toggleScrollbar();
    window.addEventListener('resize', toggleScrollbar);

    function syncScroll(event) {
        
        if (event.target.id === "scrollbar") {
            // `scrollLeft` を同期
            scrollbox.scrollLeft = scrollbar.scrollLeft;
        } else {
            scrollbar.scrollLeft = scrollbox.scrollLeft;
        }
    }

    scrollbar.addEventListener("scroll", syncScroll);
    scrollbox.addEventListener("scroll", syncScroll);
});