JavaScript を使用して水平スクロールバーと垂直スクロールバーの両方を備えた固定ヘッダー テーブルを作成するにはどうすればよいですか?

外側のコンテナに水平スクロールバーと垂直スクロールバーを備えた固定ヘッダー テーブル

固定ヘッダー テーブルを作成するための単純な HTML/CSS ソリューションはありません外側のコンテナーに水平スクロールバーと垂直スクロールバーの両方が付いています。考えられる解決策の 1 つは、JavaScript を使用してテーブルのヘッダー セクションと本文セクションのスクロールを手動で同期することです。

これを jQuery を使用して実現する方法の例を次に示します。

    <title>Fixed header table with horizontal scrollbar and vertical scrollbar on outer container</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        tr {
            width: 100%;
        }
        .outer-container {
            background-color: #ccc;
            position: absolute;
            top: 0;
            left: 0;
            right: 300px;
            bottom: 40px;
            overflow: hidden;
        }
        .inner-container {
            height: 100%;
            overflow: hidden;
        }
        .table-header {
            position: relative;
            width: 100%;
        }
        .table-body {
            overflow: auto;
            height: calc(100% - 40px);
        }
        .header-cell {
            background-color: yellow;
            text-align: left;
            height: 40px;
        }
        .body-cell {
            background-color: blue;
            text-align: left;
        }
        .col1, .col3, .col4, .col5 {
            width: 120px;
            min-width: 120px;
        }
        .col2 {
            min-width: 300px;
        }
    </style>



    <div class="outer-container">
        <div class="inner-container">
            <div class="table-header">
                <table></table>
</div>
</div>
</div>

以上がJavaScript を使用して水平スクロールバーと垂直スクロールバーの両方を備えた固定ヘッダー テーブルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。