HTMLテーブルで固定ヘッダーを実装する方法（JavaScript、CSS、HTMLテーブルを使用）

2024-06-18

HTMLテーブルに固定ヘッダーを実装する方法（JavaScript、CSS、HTMLテーブルを使用）

必要なもの

HTMLファイル
CSSファイル
JavaScriptファイル（オプション）

実装手順

HTMLテーブルの構造を準備する

まずは、通常のHTMLテーブルを作成します。ヘッダー部分を固定したい場合は、<thead>タグで囲みます。

<table>
  <thead>
    <tr>
      <th>列１</th>
      <th>列２</th>
      <th>列３</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ１</td>
      <td>データ２</td>
      <td>データ３</td>
    </tr>
    <tr>
      <td>データ４</td>
      <td>データ５</td>
      <td>データ６</td>
    </tr>
  </tbody>
</table>

CSSでヘッダーを固定する

CSSを使用して、ヘッダー部分のスタイルを以下のように設定します。

thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

position: sticky;: ヘッダーを固定表示にする
top: 0;: ヘッダーをページ最上部に配置
z-index: 10;: ヘッダーを他の要素の上に表示

JavaScriptでヘッダーの高さを調整する（オプション）

ヘッダーの高さが固定でない場合、スクロール時にテーブル本体と重なってしまいます。これを防ぐために、JavaScriptを使用して、ヘッダーの高さを動的に調整する処理を追加します。

const header = document.querySelector('thead');
const table = document.querySelector('table');

window.addEventListener('scroll', function() {
  if (window.scrollY > 0) {
    header.style.height = header.offsetHeight + 'px';
    table.style.marginTop = header.offsetHeight + 'px';
  } else {
    header.style.height = '';
    table.style.marginTop = '';
  }
});

このコードは、スクロール量に応じて、ヘッダーの高さを取得し、テーブル本体のmargin-topプロパティに設定することで、ヘッダーとテーブル本体が重なるのを防ぎます。

上記は基本的な実装方法です。状況に合わせて、スタイルや調整処理をカスタマイズする必要があります。
レスポンシブデザインに対応する場合は、メディアクエリなどを利用して、画面サイズに応じてヘッダーの表示・非表示を切り替えたり、スタイルを調整する必要があります。
JavaScriptライブラリを使用するする方法もあります。

HTMLテーブルに固定ヘッダーを実装するサンプルコード

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>HTMLテーブルに固定ヘッダーを実装</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>列１</th>
        <th>列２</th>
        <th>列３</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ１</td>
        <td>データ２</td>
        <td>データ３</td>
      </tr>
      <tr>
        <td>データ４</td>
        <td>データ５</td>
        <td>データ６</td>
      </tr>
      <tr>
        <td>データ７</td>
        <td>データ８</td>
        <td>データ９</td>
      </tr>
      <tr>
        <td>データ10</td>
        <td>データ11</td>
        <td>データ12</td>
      </tr>
    </tbody>
  </table>

  <script src="script.js"></script>
</body>
</html>

CSSファイル (style.css)

thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f0f0f0;
}

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

th, td {
  padding: 8px;
  border: 1px solid #ddd;
}

JavaScriptファイル (script.js)

const header = document.querySelector('thead');
const table = document.querySelector('table');

window.addEventListener('scroll', function() {
  if (window.scrollY > 0) {
    header.style.height = header.offsetHeight + 'px';
    table.style.marginTop = header.offsetHeight + 'px';
  } else {
    header.style.height = '';
    table.style.marginTop = '';
  }
});

このコードを実行すると、以下のようになります。

テーブルのヘッダー部分が画面最上部に固定表示されます。
スクロールしても、ヘッダー部分が常に表示され、列の見分けがつくようになります。

このサンプルコードを参考に、ご自身のニーズに合わせてカスタマイズしてみてください。

HTMLテーブルに固定ヘッダーを実装するその他の方法

<table>要素のoverflow-yプロパティを使用する

この方法は、<table>要素のoverflow-yプロパティをautoに設定して、縦方向のスクロールバーを有効にする方法です。ヘッダー部分はスクロール対象から除外するため、常に画面最上部に表示されます。

table {
  overflow-y: auto;
}

thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f0f0f0;
}

この方法は、JavaScriptを使用する必要がなく、比較的シンプルに実装できます。ただし、<table>要素全体がスクロール対象になるため、テーブルが非常に大きい場合や、他の要素と干渉する可能性がある場合は、適さない場合があります。

<table>要素を2つに分ける

この方法は、<table>要素を2つに分けて、ヘッダー部分とデータ部分それぞれにスタイルを設定する方法です。ヘッダー部分には固定レイアウト、データ部分にはスクロールレイアウトを設定することで、固定ヘッダーを実現できます。

<table>
  <thead>
    <tr>
      <th>列１</th>
      <th>列２</th>
      <th>列３</th>
    </tr>
  </thead>
</table>
<div class="table-body">
  <table>
    <tbody>
      <tr>
        <td>データ１</td>
        <td>データ２</td>
        <td>データ３</td>
      </tr>
      <tr>
        <td>データ４</td>
        <td>データ５</td>
        <td>データ６</td>
      </tr>
      <tr>
        <td>データ７</td>
        <td>データ８</td>
        <td>データ９</td>
      </tr>
      <tr>
        <td>データ10</td>
        <td>データ11</td>
        <td>データ12</td>
      </tr>
    </tbody>
  </table>
</div>

.table-body {
  overflow-y: auto;
  height: 200px; /* 必要な高さに調整 */
}

thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f0f0f0;
}

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

th, td {
  padding: 8px;
  border: 1px solid #ddd;
}