スクロール可能な Div 内に固定ヘッダー テーブルを作成するにはどうすればよいですか?

スクロール可能な Div 内に固定ヘッダー テーブルを作成する方法

スクロール中にヘッダーを固定するには、2 つのテーブルを使用することをお勧めします。 1 つは静的なヘッダー用で、もう 1 つはオーバーフローを有効にして固定高さの div でラップされたコンテンツ セル用です。

HTML:

<div class="wrap">
    <table class="head">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
            </tr>
        </thead>
    </table>
    <div class="inner_table">
        <table>
        <tbody>
            <tr>
                <td>Body 1</td>
                <td>Body 2</td>
                <td>Body 3</td>
            </tr>
            <!-- More table rows here -->
        </tbody>
    </table>
    </div>
</div>

CSS:

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

このアプローチでは、テーブルのコンテンツがスクロールされ、コンテンツによって重要な列名が隠れるのを防ぎます。

以上がスクロール可能な Div 内に固定ヘッダー テーブルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。