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

生徒

「たくさんの列がある表をスマホでも見やすくしたいんですが、どうすればいいですか？」

先生

「Bootstrapを使えば、横スクロールができる“レスポンシブテーブル”が簡単に作れますよ！」

生徒

「でも、スクロールしても表の見出し（ヘッダー）が見えなくなると困りますよね？」

先生

「そのとおり！今回は、横スクロール対応と一緒に“ヘッダー固定”もできるスターターテンプレートを紹介しますね。」

1. レスポンシブテーブルとは？

レスポンシブテーブルとは、パソコン・タブレット・スマートフォンなど、画面のサイズに応じて自動で表示を調整してくれる表のことです。

たとえば、スマホで見るときに列が画面からはみ出す場合、自動で横にスクロールできるようになります。

2. 横スクロールを実装する方法

Bootstrapでは、テーブルの外側に.table-responsiveというクラスをつけるだけで、横スクロールが使えるようになります。

これによって、スマートフォンや小さい画面でも、テーブルが切れずにスライドして全体を見ることができるようになります。

3. ヘッダー固定とは？

ヘッダー固定とは、表の一番上にあるタイトル行（見出し行）を、スクロールしても常に画面上に表示させるテクニックです。

たくさん行がある表では、下までスクロールすると「この列は何の項目だったっけ？」と分からなくなりがち。そんな時に、ヘッダーが固定されていると見やすさがぐっとアップします。

4. 横スクロール＋ヘッダー固定のHTMLテンプレート

ここでは、Bootstrapのスターターテンプレートとして、横スクロールが可能で、かつヘッダーが固定されるテーブルのサンプルを紹介します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>レスポンシブテーブル</title>
  <meta name="description" content="Bootstrapで横スクロール対応＆ヘッダー固定のレスポンシブテーブルを解説。">
  <meta name="keywords" content="Bootstrap, テーブル, table, 横スクロール,">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
  <h1 class="mb-4 text-center">Bootstrapで作るレスポンシブテーブル</h1>
  <div class="table-responsive" style="max-height: 300px;">
    <table class="table table-bordered">
      <thead class="table-light sticky-top">
        <tr>
          <th>名前</th>
          <th>メールアドレス</th>
          <th>電話番号</th>
          <th>住所</th>
          <th>職業</th>
          <th>備考</th>
          <th>年齢</th>
          <th>性別</th>
          <th>入社日</th>
          <th>ステータス</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>田中 太郎</td>
          <td>taro@example.com</td>
          <td>090-1234-5678</td>
          <td>東京都新宿区</td>
          <td>営業</td>
          <td>特になし</td>
          <td>35</td>
          <td>男性</td>
          <td>2021-04-01</td>
          <td>在籍中</td>
        </tr>
        <tr>
          <td>山田 花子</td>
          <td>hanako@example.com</td>
          <td>080-1111-2222</td>
          <td>大阪市中央区</td>
          <td>デザイナー</td>
          <td>在宅勤務希望</td>
          <td>29</td>
          <td>女性</td>
          <td>2022-01-15</td>
          <td>育休中</td>
        </tr>
        <tr>
          <td>佐藤 次郎</td>
          <td>jiro@example.com</td>
          <td>070-3333-4444</td>
          <td>北海道札幌市</td>
          <td>エンジニア</td>
          <td>英語対応可</td>
          <td>40</td>
          <td>男性</td>
          <td>2020-10-10</td>
          <td>在籍中</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示

5. 横スクロールでスマホ対応も安心

スマートフォンで表を表示すると、横幅が足りなくてレイアウトが崩れることがあります。でもBootstrapの.table-responsiveを使えば、自動的に横スクロールが有効になり、ユーザーが左右にスライドして全体を見ることができるようになります。

初心者でも、クラスを追加するだけで実装できるのが嬉しいポイントです。

6. ヘッダーを固定するスタイルのポイント

thead thにposition: stickyとtop: 0を指定すると、スクロールしても見出し行が画面の上に固定されます。

さらに背景色を設定しておくと、重なったときに文字が隠れず安心です。z-indexで重なり順を調整することも忘れずに。

7. 実用的なテーブルデザインに近づけよう

今回紹介したテンプレートをベースに、行の背景色を交互にしたり、文字サイズを調整したりすることで、さらに見やすくカスタマイズできます。

会社のデータ表、受注管理表、社員名簿など、いろいろな場面で活用できるのがBootstrapのレスポンシブテーブルの魅力です。

まとめ

Bootstrapレスポンシブテーブルの重要ポイント振り返り

ここまで、Bootstrapを使ったレスポンシブテーブルの基本から、横スクロール対応、さらにヘッダー固定までを順番に学んできました。テーブルは業務システム、管理画面、社内ツール、学習用サンプルなど、さまざまな場面で使われますが、画面サイズへの対応が不十分だと、スマートフォンやタブレットで非常に見づらくなってしまいます。

Bootstrapの.table-responsiveクラスを使うことで、HTML初心者でも簡単に横スクロール対応のテーブルを作れる点は大きな魅力です。列数が多いデータ表や一覧画面でも、レイアウトが崩れず、ユーザーが自分でスクロールして情報を確認できるようになります。これはレスポンシブデザインの基本であり、現代のWeb制作では欠かせない考え方です。

さらに、sticky-topやposition: stickyを活用したヘッダー固定は、行数が多いテーブルで特に効果を発揮します。どの列が何の項目なのかを常に把握できるため、データの読み間違いや操作ミスを防ぐことにもつながります。

実務でも役立つスターターテンプレートの考え方

今回紹介したHTMLテンプレートは、そのままコピーして使えるスターター形式になっています。コンテナ、テーブル、ヘッダー、ボディという基本構造を理解しておくことで、社員一覧表、顧客管理表、商品リスト、売上データ表など、応用の幅が大きく広がります。

Bootstrapのクラス設計はシンプルなので、HTMLとCSSの基礎を学びながら、実践的な画面を作れるのも特徴です。テーブルデザインに慣れてきたら、行の強調表示やステータスごとの色分けなど、ユーザーにとって分かりやすい工夫も取り入れていきましょう。

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


<div class="table-responsive" style="max-height:250px;">
    <table class="table table-striped table-bordered">
        <thead class="table-dark sticky-top">
            <tr>
                <th>項目</th>
                <th>説明</th>
                <th>ポイント</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>レスポンシブ</td>
                <td>画面サイズに応じて表示を調整</td>
                <td>スマホ対応が簡単</td>
            </tr>
            <tr>
                <td>横スクロール</td>
                <td>列が多くても見切れない</td>
                <td>table-responsiveを使用</td>
            </tr>
            <tr>
                <td>ヘッダー固定</td>
                <td>見出し行を常に表示</td>
                <td>sticky-topが便利</td>
            </tr>
        </tbody>
    </table>
</div>

ブラウザ表示

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

生徒

「Bootstrapのテーブルって、ただ見た目を整えるだけだと思っていましたが、スマホ対応や操作のしやすさまで考えられているんですね。」

先生

「そうなんです。レスポンシブテーブルは、ユーザー体験を大きく改善してくれます。特に横スクロールとヘッダー固定は、実務でよく使う重要なポイントですよ。」

生徒

「クラスを追加するだけで実装できるなら、初心者の私でも安心して使えそうです。管理画面や一覧ページにも応用してみたいです。」

先生

「その意識が大切です。今回のスターターテンプレートを土台に、少しずつカスタマイズしていけば、自然とHTMLとBootstrapの理解も深まりますよ。」