Bootstrapのテーブル固定ヘッダー完全ガイド！position: stickyとoverflowの実用レシピ

1. Bootstrapのテーブルとは何か

1. Bootstrapのテーブルとは何か

Bootstrapのテーブルは、表をきれいに整えて表示するための仕組みです。パソコンで言うと、ノートに定規を使って線を引いたような状態を、自動で作ってくれます。tableタグにBootstrapのクラスを付けるだけで、文字の間隔や線の太さが整い、初心者でも読みやすい表を作れます。

特にデータ一覧や名簿、商品リストなど、縦に長くなる情報を表示するときに使われます。そのため、スクロールしたときに見出しが消えない工夫が重要になります。

2. 固定ヘッダーが必要になる理由

2. 固定ヘッダーが必要になる理由

行が多いテーブルを下までスクロールすると、どの列が何の情報かわからなくなることがあります。これは、黒板の上に書いた見出しを消してしまい、下の内容だけを見ているような状態です。

固定ヘッダーは、この問題を解決します。見出し行を画面の上に貼り付けておくことで、今見ている情報が何なのか、いつでも確認できるようになります。

3. position: stickyの基本的な考え方

3. position: stickyの基本的な考え方

position: stickyは、スクロールに合わせて要素をくっつけるためのCSSの仕組みです。普段は普通に配置され、ある位置までスクロールすると、そこに固定されます。

イメージとしては、ノートに付けた付箋です。ページをめくっても、付箋は同じ位置に残ります。テーブルの見出し行にこの設定を使うことで、ヘッダーが固定されます。

<table class="table">
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>田中</td><td>20</td></tr>
        <tr><td>佐藤</td><td>22</td></tr>
    </tbody>
</table>

4. overflowとスクロール領域の関係

4. overflowとスクロール領域の関係

固定ヘッダーを使うときに重要なのがoverflowです。overflowは、箱からはみ出した中身をどう表示するか決める設定です。

テーブル全体を箱に入れ、その箱だけをスクロールさせることで、ヘッダーだけを固定できます。これは、書類をファイルケースに入れて、中だけを動かすようなイメージです。

<style>
.table-wrap {
    max-height: 200px;
    overflow-y: auto;
}
</style>

<div class="table-wrap">
    <table class="table">
        <thead>
            <tr>
                <th>商品</th>
                <th>価格</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>りんご</td><td>100</td></tr>
            <tr><td>みかん</td><td>120</td></tr>
        </tbody>
    </table>
</div>

5. Bootstrapで固定ヘッダーを作る実用例

5. Bootstrapで固定ヘッダーを作る実用例

Bootstrapでは、tableクラスと組み合わせることで、見た目を崩さず固定ヘッダーを作れます。theadの中のthにstickyを設定するのが基本です。

この方法は特別なJavaScriptを使わないため、仕組みがシンプルで初心者にも安心です。

<style>
.table thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
}
</style>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>名前</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>山田</td></tr>
        <tr><td>2</td><td>鈴木</td></tr>
    </tbody>
</table>

6. 背景色を指定する重要性

6. 背景色を指定する重要性

固定ヘッダーには必ず背景色を指定します。指定しないと、下の行が透けて見えて文字が読みにくくなります。

これは、透明な下敷きの上に文字を書いたような状態です。背景色を付けることで、見出しがはっきりと区別できるようになります。

7. よくある失敗と注意点

7. よくある失敗と注意点

固定ヘッダーが動かない場合、多くはoverflowの設定場所が間違っています。テーブル自体ではなく、外側の箱にスクロールを設定するのがポイントです。

また、topの値を指定しないとstickyは正しく動きません。基本はtop: 0を覚えておくと安心です。

<style>
.table thead th {
    position: sticky;
    top: 0;
}
</style>