固定ヘッダー付きテーブルを作る方法
固定ヘッダー付きテーブルを作る方法を紹介します。このサンプルでは、テーブルを高さの決まったスクロールエリア内に配置し、データ部分を縦方向へスクロールしても「項目名」「内容」「備考」の見出し行が上部に残るテーブルを作成します。行数の多いテーブルでも列の見出しを確認しながら内容を読み進められるため、各データがどの項目に対応しているのか把握しやすくなります。
サンプルでは、テーブルを囲む要素にmax-height:300px;とoverflow:auto;を設定してスクロールできる範囲を作り、見出しセルにはposition:sticky;とtop:0;を指定して上部へ固定します。JavaScriptは使用せず、HTMLとCSSだけで実装できます。サンプルには項目Aから項目Hまでのデータを用意しているため、実際に縦方向へスクロールしながら固定された見出し行の動作を確認できます。
固定ヘッダー付きテーブルは、商品一覧や会員一覧、売上一覧、在庫管理表、顧客管理画面など、多くの行をまとめて確認するテーブルに利用できます。HTMLでは見出しや各セルの内容を変更でき、CSSではスクロールエリアの高さ、セルの余白や枠線、見出し行の背景色や文字色などを調整できます。表示するデータが増えてテーブルが縦に長くなる場合でも、見出しを表示したまま内容を確認したい場面に活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 項目名 | 内容 | 備考 |
|---|---|---|
| 項目A | サンプル内容A | 備考A |
| 項目B | サンプル内容B | 備考B |
| 項目C | サンプル内容C | 備考C |
| 項目D | サンプル内容D | 備考D |
| 項目E | サンプル内容E | 備考E |
| 項目F | サンプル内容F | 備考F |
| 項目G | サンプル内容G | 備考G |
| 項目H | サンプル内容H | 備考H |
テーブルを縦方向へスクロールすると、「項目名」「内容」「備考」の見出し行が上部に固定されたまま表示されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- 画面幅に合わせて表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>固定ヘッダー付きテーブルを作る方法</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- テーブルをスクロール表示するエリア -->
<div class="fixed-table-header_scroll">
<!-- 固定ヘッダー付きテーブル -->
<table class="fixed-table-header_table">
<!-- 固定表示する見出し行 -->
<thead>
<tr>
<th>項目名</th>
<th>内容</th>
<th>備考</th>
</tr>
</thead>
<!-- スクロールして確認するデータ行 -->
<tbody>
<tr>
<td>項目A</td>
<td>サンプル内容A</td>
<td>備考A</td>
</tr>
<tr>
<td>項目B</td>
<td>サンプル内容B</td>
<td>備考B</td>
</tr>
<tr>
<td>項目C</td>
<td>サンプル内容C</td>
<td>備考C</td>
</tr>
<tr>
<td>項目D</td>
<td>サンプル内容D</td>
<td>備考D</td>
</tr>
<tr>
<td>項目E</td>
<td>サンプル内容E</td>
<td>備考E</td>
</tr>
<tr>
<td>項目F</td>
<td>サンプル内容F</td>
<td>備考F</td>
</tr>
<tr>
<td>項目G</td>
<td>サンプル内容G</td>
<td>備考G</td>
</tr>
<tr>
<td>項目H</td>
<td>サンプル内容H</td>
<td>備考H</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは「項目名」「内容」「備考」の3列を持つテーブルを作成し、CSSではテーブルを囲むエリアに高さとスクロールを設定します。見出しセルにはposition:sticky;とtop:0;を指定することで、データ部分を縦方向へスクロールしても見出し行が上部に固定されたまま表示されます。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは固定ヘッダー付きテーブルを構成するファイルです。thead内に「項目名」「内容」「備考」の見出しを配置し、tbody内に項目Aから項目Hまでのデータを記述しています。見出しや各セルの内容、データ行の追加・削除はこのファイルから変更できます。
style.cssはスクロールエリアとテーブルのデザインを設定するファイルです。テーブルを囲む要素の最大横幅と最大高さ、スクロール、枠線を設定し、見出しセルにはposition:sticky;とtop:0;を指定しています。セルの余白や枠線、見出しセルの背景色・文字色などもこのファイルから変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。index.htmlからstyle.cssを読み込んだ状態でsample/index.htmlをブラウザで開いてください。テーブルのデータ量がスクロールエリアの高さを超えると縦方向へスクロールでき、スクロール中も「項目名」「内容」「備考」の見出し行が上部に固定されたまま表示されます。
カスタマイズできる内容
index.htmlでは「項目名」「内容」「備考」の見出しや、項目Aから項目Hまでの各セルの内容を変更できます。tbody内へtr要素を追加するとデータ行を増やすこともできます。style.cssではスクロールエリアの最大横幅・最大高さ・枠線、セルの余白や枠線、見出しセルの背景色・文字色などを変更できます。固定位置を指定しているtop:0;も、必要に応じて調整できます。
数値調整
style.css
max-width:800px;
スクロールエリアの最大横幅です。値を大きくするとテーブルをより広く表示でき、小さくするとコンパクトになります。
max-height:300px;
スクロールエリアの最大高さです。値を大きくすると一度に表示できるデータ行が増え、小さくすると少ない行数で縦スクロールが発生しやすくなります。
margin:40px auto;
スクロールエリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置されます。
border:1px solid #d1d5db;
スクロールエリアと各セルに設定している枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
padding:12px;
見出しセルとデータセルの内側余白です。値を大きくすると文字と枠線の間隔が広がり、小さくすると詰まった表示になります。
top:0;
固定した見出しセルの上端位置です。0ではスクロールエリアの上端に固定されます。値を大きくすると、その分だけ上端から離れた位置に表示されます。
z-index:1;
固定した見出しセルの重なり順を指定しています。スクロールするデータセルより見出しセルを手前に表示するための設定です。
レスポンシブ対応
テーブルにはwidth:100%;を設定しているため、スクロールエリアの横幅に合わせて表示されます。また、スクロールエリアにはmax-width:800px;とoverflow:auto;を設定しているため、表示内容が領域を超えた場合はスクロールして確認できます。
コメント