CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのposition: stickyを使ってスクロール時にヘッダーを固定するHTMLテーブルの作り方

HTMLテーブルでは、CSSのposition: stickyとtop: 0を組み合わせることで、縦方向にスクロールしてもヘッダー行（th要素）が常に画面上部に固定表示されるテーブルを簡単に実装できます。JavaScriptを使わずCSSだけで完結するため、コードもシンプルで保守性が高いのが特徴です。

仕組みのポイント

固定ヘッダーを実現するには、以下の2点が重要です。

  • テーブル全体を包むコンテナ（div要素など）にoverflow-y: scrollを指定し、スクロール可能な領域を作る。
  • ヘッダーセル（th要素）にposition: stickyとtop: 0を指定し、スクロール位置に追従して上部に張り付かせる。

サンプルコード1：基本的な固定ヘッダーテーブル

以下は、スクロール領域内でヘッダーが固定される基本的な実装例です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   color: white;
   display: flex;
   padding: 2%;
   background-color: rgba(190,155,150);
   height: 135px;
   overflow-y: scroll;
}
td,th,p {
   text-align: center;
   font-size: 1.25em;
}
table {
   padding: 3%;
   border-collapse: collapse;
   border: 2px ridge green;
}
th {
   top: 0;
   position: sticky;
   background: #e5d2f1;
   color: black;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>A </th>
<th>B </th>
<th>C </th>
<th>D </th>
<th>E </th>
</tr>
</thead>
<tr>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
<tr>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
</table>
<p>
Duis tincidunt fermentum ipsum vel sagittis. Sed ultrices quis dui ut rutrum. Quisque et varius tellus, ut vestibulum purus. Etiam in erat fringilla, laoreet libero eu, facilisis ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eu ornare augue, ut facilisis odio.
</p>
</div>
</body>
</html>

実行結果

このコードを実行すると、次のような表示になります。

CSSのposition: stickyを使ってスクロール時にヘッダーを固定するHTMLテーブルの作り方

コンテナ内をスクロールしても、薄紫色のヘッダー行（A〜E）が常に最上部に固定されていることが確認できます。ヘッダーに背景色を指定しているのは、下のセルの内容が透けて見えないようにするためです。position: stickyを使用する際は、背景色の設定を忘れないようにしましょう。

サンプルコード2：全幅テーブルでの固定ヘッダー

次の例では、テーブル幅を100%に設定し、影（box-shadow）を使ったデザインのスクロール領域内でヘッダーを固定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   padding: 2%;
   height: 40px;
   overflow-y: scroll;
   box-shadow: inset 0 0 12px lightgreen;
}
tr th {
   background: #25f2f1;
}
table {
   text-align: center;
   position: relative;
   border-collapse: separated;
   width: 100%;
}
th {
   top: 0;
   position: sticky;
   background: white;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>A </th>
<th>B </th>
<th>C </th>
<th>D </th>
<th>E </th>
</tr>
</thead>
<tr>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
<tr>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
</table>
</div>
</body>
</html>

実行結果

このコードを実行すると、次のような表示になります。

CSSのposition: stickyを使ってスクロール時にヘッダーを固定するHTMLテーブルの作り方

まとめ

position: stickyを活用すれば、JavaScriptに頼らずCSSだけでスクロール対応の固定ヘッダーテーブルを作成できます。大量のデータを扱う管理画面や一覧表などで、ユーザーがどの列を見ているのか分からなくなる問題を防げるため、実務でも非常に役立つテクニックです。主要なモダンブラウザでサポートされているため、安心して導入できます。

  1. CSSとJavaScriptでスクロール時にヘッダーを縮小させる方法

    CSSとJavaScriptを組み合わせることで、ページのスクロール量に応じてヘッダーのサイズを動的に変更できます。この手法は、ナビゲーションバーを画面上部に固定しながら、スクロール中はコンテンツの表示領域をできるだけ広く確保したい場合に非常に効果的です。ここでは、window.onscrollイベントとCSSのtransitionプロパティを活用し、スクロールするとヘッダーがスムーズに縮小される実装例を紹介します。実装例<!DOCTYPE html> <html> <head> <meta name="viewport" cont

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {