【上級者向け】テーブルのヘッダーをスクロールに追従させる高度なテクニック
2024-04-06
テーブルのヘッダーを固定し、ボディをスクロールさせる方法
HTMLテーブルで、ヘッダー行を固定してボディ部分をスクロールできるようにするには、いくつかの方法があります。
方法
- CSS position: stickyを使う
この方法は、CSSの position プロパティに sticky を指定することで、ヘッダー行を固定します。
メリット
- シンプルで軽量
- すべてのブラウザでサポートされている
- ヘッダー行が画面上部に張り付いてしまうため、他の要素と重なる可能性がある
- 水平方向のスクロールには対応していない
コード例
<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>
</tbody>
</table>
table {
width: 100%;
}
thead {
position: sticky;
top: 0;
}
- JavaScriptを使う
この方法は、JavaScriptを使って、スクロールイベントを監視し、ヘッダー行の位置を調整します。
- ヘッダー行を画面上部に張り付けずに固定できる
- 古いブラウザではサポートされていない可能性がある
<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>
</tbody>
</table>
const table = document.querySelector('table');
const thead = document.querySelector('thead');
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset;
thead.style.top = `${scrollTop}px`;
});
- ライブラリを使う
DataTables などのライブラリを使うと、簡単にテーブルのヘッダーを固定することができます。
- 豊富な機能
- カスタマイズ性が高い
- ファイルサイズが大きくなる
- 複雑な設定が必要になる場合がある
- シンプルな方法で実装したい場合は、CSS
position: stickyを使うのがおすすめです。 - 水平方向のスクロールにも対応したい場合は、JavaScriptを使う必要があります。
- 豊富な機能やカスタマイズ性を求める場合は、ライブラリを使うと良いでしょう。
CSS position: sticky を使う
<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>
</tbody>
</table>
table {
width: 100%;
}
thead {
position: sticky;
top: 0;
}
JavaScript を使う
<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>
</tbody>
</table>
const table = document.querySelector('table');
const thead = document.querySelector('thead');
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset;
thead.style.top = `${scrollTop}px`;
});
ライブラリを使う (DataTables)
<table id="example">
<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>
</tbody>
</table>
$(document).ready(function() {
$('#example').DataTable();
});
テーブルのヘッダーを固定し、ボディをスクロールさせるその他の方法
この方法は、position: absolute と overflow: hidden を使って、ヘッダー行を固定します。
<div style="position: relative; overflow: hidden;">
<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>
</tbody>
</table>
</div>
table {
width: 100%;
}
thead {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<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>
</tbody>
</table>
table {
width: 100%;
}
thead {
position: fixed;
top: 0;
left: 0;
z-index: 1;
transform: translateY(-100%);
}
tbody {
transform: translateY(100%);
}
CSS Grid を使う
この方法は、CSS Grid を使って、ヘッダー行を固定します。
<table>
<colgroup>
<col span="3" style="width: 100px;">
</colgroup>
<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>
</tbody>
</table>
table {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
}
thead {
grid-area: 1 / 1 / 1 / 4;
position: sticky;
top: 0;
}
javascript html css
