Bootstrapテーブルをレスポンシブ対応する方法完全ガイド！.table-responsiveで横スクロールを実現

レスポンシブ化の基本：.table-responsive（-sm/-md…）で横スクロール対応

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

生徒

「スマホで表を見ると、文字がはみ出して見づらいんですが、どうすればいいですか？」

先生

「Bootstrapには、テーブルを横にスクロールできる便利な仕組みがあります。」

生徒

「難しい設定は必要ですか？」

先生

「クラスを1つ追加するだけなので、パソコン初心者でも大丈夫ですよ。」

1. レスポンシブ対応とは何かを知ろう

レスポンシブ対応とは、画面の大きさに合わせて見た目が自動で変わる仕組みのことです。パソコン、タブレット、スマートフォンでは画面の横幅が大きく違います。そのため、同じ表を表示すると、スマホでは横にはみ出してしまうことがあります。

Bootstrapのテーブルレスポンシブ機能を使うと、画面が小さいときだけ横スクロールが表示され、内容が見切れずに確認できます。これは、横に長い表をノートに無理やり書く代わりに、横にスライドさせて読むようなイメージです。

2. table-responsiveの基本的な役割

Bootstrapにはtable-responsiveというクラスがあります。このクラスは、テーブルの外側を包むことで、横スクロールを有効にします。テーブル自体に付けるのではなく、入れ物に付ける点が大切です。

難しい専門用語を使わずに説明すると、「大きな紙を封筒に入れて、はみ出したら横にずらして読む」仕組みです。この封筒の役割をするのがtable-responsiveです。


<div class="table-responsive">
    <table class="table table-bordered">
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>住所</th>
            <th>電話番号</th>
        </tr>
        <tr>
            <td>山田</td>
            <td>30</td>
            <td>東京都</td>
            <td>000-0000</td>
        </tr>
    </table>
</div>

ブラウザ表示

3. 画面サイズ別に使えるresponsive-smやmd

Bootstrapでは、画面サイズに応じて動きを変えることができます。table-responsive-smやtable-responsive-mdを使うと、「このサイズ以下のときだけ横スクロールする」といった指定が可能です。

例えば、パソコンでは普通に表示し、スマホのときだけスクロールさせたい場合に便利です。これは、本棚の高さに合わせて棚を引き出すような考え方です。


<div class="table-responsive-sm">
    <table class="table table-striped">
        <tr>
            <th>商品名</th>
            <th>価格</th>
            <th>在庫</th>
            <th>備考</th>
        </tr>
        <tr>
            <td>りんご</td>
            <td>100円</td>
            <td>20</td>
            <td>青森産</td>
        </tr>
    </table>
</div>

ブラウザ表示

4. なぜテーブルは横スクロールが必要なのか

表は縦と横の情報を同時に見せるため、どうしても横に長くなります。スマートフォンの小さな画面では、文字を無理に縮めるより、横スクロールの方が読みやすくなります。

Bootstrapのテーブルレスポンシブ対応は、情報を削らずに見せるための工夫です。初心者の方でも、見た目が崩れない安心感があります。

5. 固定ヘッダーと一緒に使うときの考え方

固定ヘッダーとは、スクロールしても表の見出しが残る仕組みです。table-responsiveと組み合わせる場合は、まず横スクロールを優先して考えるのがポイントです。

横に動かしても見出しが分かることで、どの列の情報か迷わなくなります。これは、地図を見るときに方角が常に表示されているような感覚です。


<div class="table-responsive">
    <table class="table">
        <thead class="table-dark">
            <tr>
                <th>日付</th>
                <th>内容</th>
                <th>担当</th>
                <th>状態</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>4/1</td>
                <td>打ち合わせ</td>
                <td>佐藤</td>
                <td>完了</td>
            </tr>
        </tbody>
    </table>
</div>

ブラウザ表示