HTMLのテーブルでヘッダーを固定する方法

HTML CSS

HTMLのテーブルでヘッダーを固定する方法

HTMLのテーブルでヘッダーを固定する方法について、詳細に説明します。
テーブルのヘッダーを固定することで、大量のデータをスクロールしながらも、ヘッダー行を常に表示させることができるため、データの読みやすさが向上します。

HTMLとCSSの分割

まず、HTMLファイルとCSSファイルを分けて作成します。
以下はその例です。

HTMLファイル (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定ヘッダーのテーブル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="test-table-container">
    <table class="test-table">
      <thead>
        <tr>
          <th class="test-header">ヘッダー1</th>
          <th class="test-header">ヘッダー2</th>
          <th class="test-header">ヘッダー3</th>
          <th class="test-header">ヘッダー4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="test-data">データ1</td>
          <td class="test-data">データ2</td>
          <td class="test-data">データ3</td>
          <td class="test-data">データ4</td>
        </tr>
        <!-- さらに行を追加 -->
      </tbody>
    </table>
  </div>
</body>
</html>
CSSファイル (styles.css)
.test-table-container {
  max-height: 400px; /* コンテナの最大高さを設定 */
  overflow-y: auto; /* 縦スクロールを有効にする */
  border: 1px solid #ccc; /* 枠線を追加 */
}

.test-table {
  width: 100%; /* テーブルの幅を100%に設定 */
  border-collapse: collapse; /* 枠線の重なりを防ぐ */
}

.test-header {
  background-color: #f2f2f2; /* ヘッダーの背景色を設定 */
  position: sticky; /* ヘッダーをスクロールに固定する */
  top: 0; /* ヘッダーをコンテナの上部に固定 */
  z-index: 1; /* ヘッダーをテーブルの上に表示 */
  border-bottom: 2px solid #ddd; /* ヘッダーの下に境界線を追加 */
}

.test-data {
  padding: 8px; /* データセルの内側にパディングを追加 */
  border-bottom: 1px solid #ddd; /* データセルの下に境界線を追加 */
}

詳細な説明

1. HTML構造

  • tableタグでテーブルを作成し、thead内にヘッダー行を配置します。
  • tbody内にデータ行を追加します。

データ行は任意の数を追加でき、ここではサンプルとして1行だけ示しています。

2. CSS設定

  • .test-table-containerクラスを使用して、テーブルのコンテナに最大高さを設定し、縦方向のスクロールを有効にします。

この設定により、テーブルが大きくてもスクロールして全体を見ることができます。

  • .test-tableクラスで、テーブル全体のスタイリングを行います。

border-collapse: collapseを設定することで、テーブルセルの枠線が重ならないようにします。

  • .test-headerクラスにposition: stickyを指定し、top: 0でヘッダーをコンテナの上部に固定します。

z-index: 1を設定して、ヘッダーがスクロール時にテーブルデータの上に表示されるようにします。

  • .test-dataクラスはデータセルにパディングと境界線を追加し、視覚的に見やすくします。

この方法により、テーブルのヘッダーをスクロールしても画面上部に固定されたまま表示させることができ、大量のデータを扱う際に非常に便利です。
CSSのposition: stickyは、ブラウザのサポートが広がっているため、多くの現代的なブラウザで使用可能です。

このように、HTMLとCSSを分けることで、スタイルと構造を別々に管理しやすくなります。
また、クラス名やID名にtest-をプレフィックスとして使用することで、スタイルの適用を特定の要素に限定し、他のスタイルと干渉しないようにしています。