Bootstrapで縦スクロールできるテーブルを作る方法｜高さ固定＋ヘッダー固定を超やさしく解説

縦スクロールテーブル：高さ固定コンテナ＋ヘッダー固定の実装

先生と生徒の会話形式で理解しよう

生徒

「表が長すぎて、下の行を見るときに見出しが消えてしまいます…」

先生

「それなら、縦にスクロールできて、しかも見出しが固定されるテーブルを使うと便利ですよ」

生徒

「パソコンを触ったことがなくても作れますか？」

先生

「大丈夫です。箱と紙にたとえながら、順番に説明しますね」

1. 縦スクロールテーブルとは何か

縦スクロールテーブルとは、表の高さを決めて、その中だけを上下に動かせるテーブルのことです。机の上に箱を置き、その中に長い紙の表を入れて、箱の中だけをのぞいて動かすイメージです。Bootstrapでは、この仕組みをとても簡単に作ることができます。

2. Bootstrapのテーブルの基本構造

Bootstrapのテーブルは、HTMLのtableという仕組みを使います。これは「表を作るための決まった型」です。行や列をそろえる役割があり、Excelのマス目のようなものだと考えるとわかりやすいです。


<table class="table">
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>山田</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

ブラウザ表示

3. 高さを固定する箱を用意する

縦スクロールを作るためには、まず「高さが決まった箱」を用意します。この箱の中にテーブルを入れることで、はみ出した部分だけがスクロールします。箱とは、divというHTMLの部品です。


<div style="height:200px; overflow-y:auto;">
    ここにテーブルが入ります
</div>

ブラウザ表示

4. ヘッダーを固定する仕組み

ヘッダーとは、表の一番上にある見出し行のことです。これを固定するには、少しだけCSSという「見た目を決めるルール」を使います。難しく考えず、「この行はその場に止まっていてね」と伝える命令だと思ってください。


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

ブラウザ表示

5. 高さ固定とヘッダー固定を組み合わせる

ここまでの内容を合体させると、縦にスクロールできて、見出しが消えないテーブルになります。箱の中に表を入れ、見出しだけを固定する、という流れです。


<div style="height:250px; overflow-y:auto;">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>商品名</th>
                <th>価格</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>りんご</td><td>100円</td></tr>
            <tr><td>みかん</td><td>120円</td></tr>
            <tr><td>ばなな</td><td>90円</td></tr>
            <tr><td>ぶどう</td><td>300円</td></tr>
        </tbody>
    </table>
</div>

ブラウザ表示

6. Bootstrapのクラスで見た目を整える

Bootstrapには、表をきれいに見せるためのクラスがたくさん用意されています。クラスとは「見た目の服」のようなもので、付けるだけでデザインが整います。難しい操作は必要ありません。

7. 初心者がつまずきやすいポイント

よくある失敗は、箱の高さを決め忘れることです。高さがないと、そもそもスクロールは発生しません。また、見出しの背景色を指定しないと、文字が重なって見えることがあります。これらは設定を一つ足すだけで解決できます。

8. 縦スクロールテーブルが役立つ場面

縦スクロールとヘッダー固定のテーブルは、名簿、商品一覧、管理画面などで特に活躍します。画面が小さくても情報を整理して見せられるため、初心者にもやさしい画面構成になります。

まとめ

この記事では、Bootstrapを使って縦スクロールできるテーブルを作成する方法について、HTMLやCSSに初めて触れる人でも理解できるよう、順を追って説明してきました。縦スクロールテーブルとは、表全体の高さを固定し、その中身だけを上下に動かせる仕組みのことです。これにより、データ量が多い表でも画面を占領せず、読みやすさを保つことができます。特に管理画面や商品一覧、名簿のような情報量の多いページでは、縦スクロールとヘッダー固定の組み合わせがとても重要になります。

基本となる考え方はとてもシンプルで、「高さを決めた箱の中にテーブルを入れる」という発想です。この箱の役割を果たすのがdivタグであり、style属性やCSSを使って高さとスクロールの設定を行います。overflow-yをautoに設定することで、内容がはみ出したときだけ縦方向にスクロールバーが表示されます。この仕組みを理解することで、テーブル以外のレイアウトにも応用できるようになります。

さらに、表の見出し行を固定するために使用したのが、position: stickyというCSSの指定です。これは「スクロールしても、決められた位置にとどまる」という性質を持っています。theadのthタグに対して指定することで、表の中身だけが動き、見出しは常に上に表示されたままになります。背景色を設定する理由も重要で、スクロール時に文字が重なって見えないようにするための工夫です。

Bootstrapのtableクラスやtable-borderedといったクラスを使うことで、見た目を簡単に整えられる点も大きな特徴です。難しいデザインの知識がなくても、クラスを付けるだけで整った表が完成します。これはBootstrapの大きな強みであり、初心者がつまずきにくい理由の一つです。

また、初心者がよく失敗しがちなポイントとして、高さを指定し忘れるケースや、ヘッダー固定だけを設定してスクロールが効かないケースがありました。これらは仕組みを理解すればすぐに解決できます。縦スクロールが発生する条件は「高さが固定されていること」、ヘッダー固定が正しく動く条件は「スクロールする親要素が存在すること」です。この二つを意識するだけで、トラブルは大きく減ります。

縦スクロールテーブルは、画面サイズが限られている場合や、スマートフォンやタブレットでの閲覧を意識したときにも役立ちます。情報を詰め込みすぎず、必要な部分だけを見せることで、ユーザーにやさしい画面設計ができます。今回学んだ内容は、Bootstrapのテーブルだけでなく、Webページ全体のレイアウト設計にもつながる大切な考え方です。

まとめのサンプルプログラム


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

<div style="height:200px; overflow-y:auto;">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>項目</th>
                <th>内容</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>仕組み</td><td>高さ固定の箱の中でスクロール</td></tr>
            <tr><td>重要設定</td><td>overflow-yとposition</td></tr>
            <tr><td>利点</td><td>見出しが常に見える</td></tr>
            <tr><td>用途</td><td>一覧表や管理画面</td></tr>
        </tbody>
    </table>
</div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「縦にスクロールできるテーブルって、ただ表を長くするだけじゃないんですね」

先生

「そうです。高さを決めた箱の中で動かす、という考え方が大切でしたね」

生徒

「見出しが消えないのも、CSSで位置を固定しているだけだとわかりました」

先生

「positionの指定を覚えると、他の場面でも役に立ちますよ」

生徒

「Bootstrapのクラスを付けるだけで、見た目が整うのも安心しました」