HTMLの表のtbodyは上下左右にスライドできます

テーブルヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの部分は thead で、もう 1 つの部分は tbody です。具体的な実装は次のとおりです。

HTMLコード:

<div class="table_box_big">
<div class="table_box">
    <テーブル>
        <頭>
        <tr>
            <th><div>タイトル 1</div></th>
            <th><div>タイトル 2</div></th>
            <th><div>タイトル 3</div></th>
            <th><div>タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル 4</div></th>
            <th><div>タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル 5</div></th>
            <th><div>タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル タイトル 6</div></th>
        </tr>
        </thead>
    </テーブル>
    <div class="table_tbody_box">
        <テーブル>
            <tr>
                <td>情報 1</td>
                <td>情報 2</td>
                <td>情報 3</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 4</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 5</td>
                <td>情報情報情報情報情報情報情報情報情報情報情報情報6</td>
            </tr>
            <tr>
                <td>情報 1</td>
                <td>情報 2</td>
                <td>情報 3</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 4</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 5</td>
                <td>情報情報情報情報情報情報情報情報情報情報情報情報6</td>
            </tr>
            <tr>
                <td>情報 1</td>
                <td>情報 2</td>
                <td>情報 3</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 4</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 5</td>
                <td>情報情報情報情報情報情報情報情報情報情報情報情報6</td>
            </tr>
            <tr>
                <td>情報 1</td>
                <td>情報 2</td>
                <td>情報 3</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 4</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 5</td>
                <td>情報情報情報情報情報情報情報情報情報情報情報情報6</td>
            </tr>
            <tr>
                <td>情報 1</td>
                <td>情報 2</td>
                <td>情報 3</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 4</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 5</td>
                <td>情報情報情報情報情報情報情報情報情報情報情報情報6</td>
            </tr>
            <tr>
                <td>情報 1</td>
                <td>情報 2</td>
                <td>情報 3</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 4</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 5</td>
                <td>情報情報情報情報情報情報情報情報情報情報情報情報6</td>
            </tr>
            <tr>
                <td>情報 1</td>
                <td>情報 2</td>
                <td>情報 3</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 4</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 5</td>
                <td>情報情報情報情報情報情報情報情報情報情報情報情報6</td>
            </tr>
            <tr>
                <td>情報 1</td>
                <td>情報 2</td>
                <td>情報 3</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 4</td>
                <td>情報、情報、情報、情報、情報、情報、情報、情報 5</td>
                <td>情報情報情報情報情報情報情報情報情報情報情報情報6</td>
            </tr>
        </テーブル>
    </div>
</div>

CSS スタイル:

.table_box_big {
 オーバーフローx: スクロール;
 オーバーフロー-y: 非表示;
 位置: 相対的;
 高さ: 350ピクセル;
}
.テーブルボックス{
 オーバーフロー: 非表示;
 位置: 絶対;
}
.table_tbody_box {
 高さ: 300px;
 オーバーフロー: スクロール;
}
テーブル {
 境界線: 1px 実線 #eeeeee;
}
テーブル ヘッダー tr th {
 幅: 80ピクセル;
 高さ: 50px;
 右境界線: 1px 実線 #eeeeee;
 テキスト配置: 中央;
 単語区切り: すべて保持;
 パディング: 2px 10px;
 背景: スカイブルー;
}
テーブル tbody tr td {
 幅: 80ピクセル;
 高さ: 50px;
 右境界線: 1px 実線 #eeeeee;
 テキスト配置: 中央;
 下部境界線: 1px 実線 #eeeeee;
 単語区切り: すべて保持;
 パディング: 2px 10px;
}

効果は以下のとおりです。

これで、HTML のテーブルの固定ヘッダーに関するこの記事は終了です。テーブルの tbody は上下左右にスライドできます。HTML のテーブルの固定ヘッダーに関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: 適応分析と応答分析の違いを専門用語で詳しく説明

>>: CSS はこのように使用できますか?気まぐれなグラデーションの芸術