HTMLのテーブルでウィンドウ枠を固定する方法

HTML CSS

HTMLのテーブルでウィンドウ枠を固定する方法

HTMLテーブルのウィンドウ枠を固定するためには、テーブルのヘッダーや一部の列がスクロールしても常に表示されるように設定できます。
これを実現するために、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-container">
    <table class="test-table">
      <thead class="test-thead">
        <tr>
          <th class="test-th">ヘッダー1</th>
          <th class="test-th">ヘッダー2</th>
          <th class="test-th">ヘッダー3</th>
        </tr>
      </thead>
      <tbody class="test-tbody">
        <tr>
          <td class="test-td">データ1</td>
          <td class="test-td">データ2</td>
          <td class="test-td">データ3</td>
        </tr>
        <!-- 以下、データ行が続きます -->
        <tr>
          <td class="test-td">データ4</td>
          <td class="test-td">データ5</td>
          <td class="test-td">データ6</td>
        </tr>
        <!-- ここに追加データ行を挿入 -->
      </tbody>
    </table>
  </div>
</body>
</html>

CSSファイル（styles.css）

.test-container {
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
}

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

.test-thead {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  z-index: 1;
}

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

.test-th {
  background-color: #f4f4f4;
}

解説

1. HTMLの構造:

  • test-containerクラスのdiv要素でテーブル全体を囲み、max-heightとoverflow-yを設定して、テーブルが一定の高さを超えるとスクロールするようにします。
  • test-tableクラスを持つtable要素には、thead、tbody、tr、th、tdなどのタグを使ってテーブルの構造を定義しています。

2. CSSの設定:

  • test-containerクラスには、テーブルのスクロール領域を制限するためにmax-heightを設定し、overflow-yをautoに設定することで、テーブルが指定された高さを超えるとスクロールバーが表示されるようにします。
  • test-theadクラスには、position: stickyを設定し、top: 0でスクロール時にヘッダー行を固定します。

背景色を指定し、z-indexでヘッダーが他の行の上に表示されるようにしています。

  • test-thとtest-tdクラスには、テーブルセルの基本的なスタイルを設定しています。

test-thクラスには、ヘッダー用の背景色を設定しています。

これにより、テーブルのヘッダーが常に表示され、テーブルのデータ部分がスクロール可能になります。
この方法は、長いデータセットを扱う際に非常に便利です。