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

生徒

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

先生

「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, 横スクロール, ヘッダー固定, レスポンシブ, HTML初心者, スターターテンプレート">
  <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>

ブラウザ表示