固定ヘッダー付きテーブルを作る方法【HTML/CSS・サンプルコード付き】

フォーム

固定ヘッダー付きテーブルを作る方法

固定ヘッダー付きテーブルを作る方法を紹介します。本記事では、HTMLとCSSを使って、テーブルの見出し行を固定したままデータ部分だけを縦スクロールできるテーブルの実装方法を解説します。データ件数が多い表では、スクロールすると列名が見えなくなり、どの項目の情報なのか分かりにくくなることがあります。固定ヘッダーを利用することで、スクロール中も見出しを常に表示できるため、視認性の高いテーブルを作成できます。

このサンプルコードでは、テーブル全体をスクロールエリア内に配置し、ヘッダー行にCSSの固定表示設定を適用します。JavaScriptを使用せず、HTMLとCSSのみで実装できるため、既存のWebサイトや管理画面にも導入しやすい構成です。データ行が増えてもヘッダーは常に表示されたままとなるため、一覧表の確認作業を快適に行えます。

固定ヘッダー付きテーブルは、商品一覧、会員一覧、売上一覧、在庫管理表、顧客管理画面など、多くのデータを表示する場面で活用できます。行数の多いテーブルでも列名を見失いにくくなるため、操作性や可読性の向上につながります。シンプルな構成なのでカスタマイズもしやすく、固定ヘッダー付きテーブルを手軽に導入したい方におすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

項目名 内容 備考
項目A サンプル内容A 備考A
項目B サンプル内容B 備考B
項目C サンプル内容C 備考C
項目D サンプル内容D 備考D
項目E サンプル内容E 備考E
項目F サンプル内容F 備考F
項目G サンプル内容G 備考G
項目H サンプル内容H 備考H

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- 画面幅に合わせて表示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>固定ヘッダー付きテーブルを作る方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- テーブルをスクロール表示するエリア -->
  <div class="fixed-table-header_scroll">

    <!-- 固定ヘッダー付きテーブル -->
    <table class="fixed-table-header_table">

      <!-- 固定表示する見出し行 -->
      <thead>
        <tr>
          <th>項目名</th>
          <th>内容</th>
          <th>備考</th>
        </tr>
      </thead>

      <!-- スクロールして確認するデータ行 -->
      <tbody>
        <tr>
          <td>項目A</td>
          <td>サンプル内容A</td>
          <td>備考A</td>
        </tr>
        <tr>
          <td>項目B</td>
          <td>サンプル内容B</td>
          <td>備考B</td>
        </tr>
        <tr>
          <td>項目C</td>
          <td>サンプル内容C</td>
          <td>備考C</td>
        </tr>
        <tr>
          <td>項目D</td>
          <td>サンプル内容D</td>
          <td>備考D</td>
        </tr>
        <tr>
          <td>項目E</td>
          <td>サンプル内容E</td>
          <td>備考E</td>
        </tr>
        <tr>
          <td>項目F</td>
          <td>サンプル内容F</td>
          <td>備考F</td>
        </tr>
        <tr>
          <td>項目G</td>
          <td>サンプル内容G</td>
          <td>備考G</td>
        </tr>
        <tr>
          <td>項目H</td>
          <td>サンプル内容H</td>
          <td>備考H</td>
        </tr>
      </tbody>

    </table>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにテーブル構造を記述し、CSSでスクロールエリアと固定ヘッダーの表示を設定します。JavaScriptは使用しません。 

sample/
├── index.html
└── style.css

index.html と style.css を同じフォルダへ配置し、ブラウザで index.html を開いてください。テーブルの行数を増やしたい場合は、HTML内の <tbody> に <tr> を追加します。

コメント