【保存版】固定テーブルヘッダーの決定版！HTML、CSS、JavaScriptによる実装方法を徹底解説
HTMLとCSSで固定テーブルヘッダーを実現する方法
方法1：CSS position: sticky を使用する
position: sticky は、要素をブラウザウィンドウ内に固定表示するCSSプロパティです。ヘッダー行に position: sticky を設定することで、スクロールしてもヘッダー行が画面上に固定されます。
thead th {
position: sticky;
top: 0;
z-index: 1;
}
このコードは以下の通り動作します。
position: sticky：ヘッダー行をブラウザウィンドウ内に固定します。top: 0：ヘッダー行をブラウザウィンドウの上部に配置します。z-index: 1：ヘッダー行を他の要素の上に配置します。
方法2：JavaScriptを使用する
JavaScriptを使用して、ヘッダー行を固定する方法もあります。この方法は、より柔軟なカスタマイズが可能です。
以下の例では、scroll イベントを使用して、ヘッダー行をスクロール位置に合わせて動的に更新しています。
<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>
</tbody>
</table>
<script>
const header = document.querySelector('thead');
const table = document.querySelector('table');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop > 0) {
header.classList.add('fixed');
header.style.top = scrollTop + 'px';
} else {
header.classList.remove('fixed');
header.style.top = 0;
}
});
</script>
querySelector関数を使用して、ヘッダー行 (thead) とテーブル要素 (table) を取得します。scrollイベントリスナーを使用して、スクロール位置の変化を検出します。pageYOffsetプロパティを使用して、現在のスクロール位置を取得します。- スクロール位置が0より大きい場合、ヘッダー行に
fixedクラスを追加し、topプロパティをスクロール位置に設定します。これにより、ヘッダー行が画面上に固定されます。
注意点
position: stickyを使用する場合は、親要素にoverflow: autoまたはoverflow: scrollを設定する必要があります。- JavaScriptを使用する場合は、ブラウザの互換性を考慮する必要があります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定テーブルヘッダー</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
thead th {
background-color: #eee;
position: sticky;
top: 0;
z-index: 1;
}
tbody tr {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<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>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
<tr>
<td>データ7</td>
<td>データ8</td>
<td>データ9</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS
table {
width: 100%;
border-collapse: collapse;
}
thead th {
background-color: #eee;
position: sticky;
top: 0;
z-index: 1;
}
tbody tr {
border: 1px solid #ddd;
}
このコードでは、以下の設定を行っています。
- テーブル全体に幅100%、ボーダー崩れなしを設定します。
- ヘッダー行の背景色を薄灰色に設定します。
position: stickyを使用して、ヘッダー行を画面上に固定します。- ボディ行にボーダーを設定します。
このコードを実行すると、以下のようになります。
テーブルをスクロールしても、ヘッダー行が常に画面上に表示されます。
説明
このサンプルコードは、HTMLとCSSで固定テーブルヘッダーを実現する最も基本的な方法を示しています。実際の状況に合わせて、コードをカスタマイズする必要があります。
例えば、以下の点についてカスタマイズすることができます。
- ヘッダー行の色やフォントを変更する
- 特定の列のみを固定する
- レスポンシブデザインに対応する
これらのカスタマイズは、CSSの追加や変更によって行うことができます。
HTMLとCSS以外で固定テーブルヘッダーを実現する方法
JavaScriptライブラリを使用する
固定テーブルヘッダーを実現する機能を提供するJavaScriptライブラリがいくつかあります。これらのライブラリを使用すると、HTMLとCSSだけで実現するよりも簡単に固定テーブルヘッダーをを実装することができます。
代表的なライブラリは以下の通りです。
これらのライブラリは、それぞれ異なる機能や利点を持っています。プロジェクトの要件に合わせて、適切なライブラリを選択する必要があります。
フレームワークを使用する
React、Vue.js、Angularなどのフレームワークには、固定テーブルヘッダーを実装するためのコンポーネントやディレクティブが用意されている場合があります。これらのコンポーネントやディレクティブを使用すると、コードをより簡単に記述することができます。
サーバーサイドでレンダリングを行う
固定テーブルヘッダーをサーバーサイドでレンダリングすることもできます。この方法では、クライアント側のJavaScriptを使用する必要がなく、パフォーマンスを向上させることができます。
ただし、サーバーサイドでレンダリングを行うには、追加の開発作業が必要となります。
ネイティブアプリを使用する
Webブラウザではなく、ネイティブアプリでアプリケーションを開発する場合は、ネイティブのAPIを使用して固定テーブルヘッダーを実装することができます。
ネイティブアプリでは、より高度な機能を実装することができますが、開発コストが高くなります。
どの方法を選択するかは、プロジェクトの要件や開発者のスキルによって異なります。
以下に、各方法の利点と欠点をまとめました。
| 方法 | 利点 | 欠点 |
|---|---|---|
| HTMLとCSS | シンプルでわかりやすい | カスタマイズが難しい |
| JavaScriptライブラリ | 簡単で使いやすい | ライブラリの習得が必要 |
| フレームワーク | コードが簡潔になる | フレームワークの習得が必要 |
| サーバーサイドレンダリング | パフォーマンスが向上 | 開発作業が増加 |
| ネイティブアプリ | 高度な機能を実装できる | 開発コストが高い |
これらの情報を参考に、プロジェクトに最適な方法を選択してください。
html css
