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

HTML CSS

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

HTMLテーブルのヘッダーを固定する方法について説明します。
テーブルのヘッダーを固定することで、大量のデータを扱う場合にヘッダーが常に画面の上部に表示されるため、視認性が向上します。
この目的を達成するためには、CSSを利用してヘッダーをスクロール可能な領域から分離し、固定するスタイルを適用します。

以下に、HTMLとCSSを使用してテーブルのヘッダーを固定する方法の例を示します。
HTMLとCSSは別々のファイルで提供し、クラス名やID名には「test-」というプレフィックスを使用します。

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 class="test-table-header">
        <tr>
          <th class="test-header-cell">ヘッダー1</th>
          <th class="test-header-cell">ヘッダー2</th>
          <th class="test-header-cell">ヘッダー3</th>
        </tr>
      </thead>
      <tbody class="test-table-body">
        <tr>
          <td class="test-body-cell">データ1</td>
          <td class="test-body-cell">データ2</td>
          <td class="test-body-cell">データ3</td>
        </tr>
        <!-- 多くの行をここに追加 -->
      </tbody>
    </table>
  </div>
</body>
</html>

CSSファイル（styles.css）

.test-table-container {
  max-height: 400px; /* コンテナの最大高さを設定 */
  overflow-y: auto;  /* 縦方向にスクロールを追加 */
}

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

.test-table-header {
  position: sticky;
  top: 0;
  background-color: #f4f4f4;
  z-index: 1; /* ヘッダーが他のコンテンツより上に表示されるようにする */
}

.test-header-cell {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

.test-table-body {
  display: block;
  max-height: 300px; /* テーブルボディの最大高さを設定 */
  overflow-y: auto;  /* 縦方向にスクロールを追加 */
}

.test-body-cell {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

.test-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

この例では、テーブルを含むコンテナの高さを制限し、スクロール可能にしています。
テーブルのヘッダー（test-table-headerクラス）にはposition: stickyを適用し、top: 0で画面上部に固定しています。
また、z-indexプロパティを設定することで、他の内容の上に表示されるようにしています。
テーブルのボディ部分（test-table-bodyクラス）には縦方向のスクロールを追加し、最大高さを設定しています。

これにより、テーブルのヘッダーが固定され、スクロールしても常に表示されるようになります。
テーブル本体の内容はスクロールすることで表示されるため、長いデータセットでも操作が容易になります。