CSSでtableのtheadを固定してスクロールする方法

2024-12-28

大きな表をウェブページに表示する際、スクロール中でもヘッダー行が常に表示されていると便利です。
エクセルの「ウィンドウ枠の固定」というと、わかりやすいでしょうか？
特にデータが多い表では、列の意味を簡単に確認できるため、ユーザー体験を向上させることができます。

本記事では、CSSを使ってヘッダー行を固定し、スクロール可能なテーブルを作成する方法を詳しく解説します。

実装方法

ヘッダー行を固定するには、以下のような手法を用います。

テーブルをラップする親要素を作成する。
テーブル全体をスク固定ル可能にする。
CSSでヘッダー行を固定する。

基本構造

まずはHTMLの基本構造を用意します。
ここでは以下のHTMLをもとに、CSSでスタイリングを加えていきます。

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <!-- データが続く -->
    </tbody>
  </table>
</div>

CSSによるスタイリング

以下のCSSを適用することで、スクロール中にヘッダー行が固定されるテーブルを作成します。

.table-container {
  max-height: 200px; /* 【任意の値】テーブルの高さを指定 */
  overflow-y: auto; /* 【必須】垂直方向のスクロールを有効化 */
  border: 1px solid #ccc; /* 【任意】見やすいように枠線を追加 */
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
}

.table-container th,
.table-container td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

.table-container thead th {
  position: sticky; /* 【必須】固定する */
  top: 0; /* 【必須】スクロール時の固定位置 */
  background-color: #f9f9f9; /* 【任意】背景色を指定 */
  z-index: 1; /* 【保険】他の要素より上に表示 */
}

実装結果

このCSSを適用することで、テーブルのヘッダー行が固定され、スクロール時も列名を確認しやすくなります。

列1	列2	列3
データ1	データ2	データ3
データ1	データ2	データ3
データ1	データ2	データ3
データ1	データ2	データ3
データ1	データ2	データ3

応用例

横スクロールにも対応する

データが多い場合、横方向にもスクロールが必要になることがあります。
この場合も同じ方法で対応可能です。

.table-container {
  max-height: 200px;
  max-width: 100%;
  overflow: auto; /* 水平方向と垂直方向の両方をスクロール可能にする */
}

.table-container thead th {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
}

ヘッダーのデザインを強調する

ヘッダー行が固定されている場合、背景色やフォントスタイルを変更して視覚的に目立たせるとさらに効果的です。

.table-container thead th {
  background-color: #0044cc;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

まとめ

本記事では、CSSを使用してテーブルのヘッダー行を固定し、スクロール可能な表を作成する方法を解説しました。
さらに応用例や注意点についても説明しました。
大きなデータを扱うウェブページでは、ユーザビリティを向上させるためにぜひ活用してみてください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！