HTMLの表でヘッダー行を固定してスクロール時も残るようにする方法

投稿日：2021年4月12日更新日：2021年2月24日

＜目次＞

(１) HTMLの表でヘッダー行を固定してスクロール時も残るようにする方法
　 (１-１) 構文
　 (１-２) サンプルプログラム
　 (１-３) サンプルプログラム実行結果

(１) HTMLの表でヘッダー行を固定してスクロール時も残るようにする方法

HTMLの表（<table>）で、縦長の場合などにスクロールした際に、ヘッダーだけは固定して残したい場合があるかと思いますが、その方法についてご紹介します。

最終的なアウトプットとしては、次のようなイメージになります。

（動画）Stickyの動画

動画プレーヤー

Media error: Format(s) not supported or source(s) not found

ファイルをダウンロード: https://rainbow-engine.com/wp-content/uploads/2021/04/RP-IT0308_JSP_Table_Header_Fix/RP-IT0308_100_bandicam-2021-02-05-17-16-09-988.mp4?_=1

00:00

ボリューム調節には上下矢印キーを使ってください。

(１-１) 構文

要素を固定するためには、cssに「position」プロパティを追記し、その値に「sticky」を指定します。例えば、表（<table>）のヘッダー（<th>）を固定する例ですと、cssに次の記述を行います。

（構文）

th {
  background:#eee;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

（構文説明）

●セレクタ「th {・・・}」

今回は表のヘッダー（<th>）を固定したいので「th」を指定します。

●プロパティと値「background:#eee;」

スクロールした際にヘッダーと明細が重なって見えないように、ヘッダーには適当な色を付けています（これがないとヘッダーはスケルトン状態で、明細がスクロールで重なってしまう）。

●プロパティと値「position: sticky;」

「position」は要素の位置を制御するためのプロパティですが、今回「表のヘッダーを固定」するためには、値を「sticky」に指定します。

①relative

要素を「通常の位置から見た相対位置に固定」し、通常の要素と同様にスクロールに応じて移動していきます。

②absolute

要素を「ページ上の特定位置に固定」し、通常の要素と同様にスクロールに応じて移動していきます。

③fixed

要素を「画面上の特定位置に固定」し、例えスクロールしても同じ位置に残り続けます。要素位置の指定には「top/bottom/left/right」を使います。

④sticky

「sticky」は「relative」と「fixed」を組み合わせたハイブリッドのような方式で、スクロールし始めは「relative」のように振る舞い、要素はスクロールに応じて移動していきますが、ひとたび指定した位置（閾値）を超えると「fixed」のように振るい、ずっと指定の位置に固定されます。

この性質を利用する事で、縦長の表のヘッダーを固定する事ができます。

●プロパティ: 値「position: -webkit-sticky;」

Safariブラウザの場合は、こちらの「-webkit-sticky」も必要になります。

＞目次にもどる

(１-２) サンプルプログラム

(１-２-１) css

cssに関しては、上記でご紹介した構文のまんまです。
（サンプル）

@charset "UTF-8";
 
th {
        background:#eee;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
}

（図１２１）

＞目次にもどる

(１-２-２) JSP

JSPに関してはスクロールの様子を確認できるよう、適用な100行の<table>を作成しています。

（サンプル）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/IT0996_FixTableHeader.css">
<title>Fix Table Header Example</title>
</head>
<body>
<p>
これは表(table)のヘッダー(th)の固定テストです。<br />
先頭行を固定するためにcssでposition: stickyを指定しています。<br />
</p>
空行1<br />空行2<br />空行3<br />空行4<br />空行5<br />
空行6<br />空行7<br />空行<br />空行9<br />空行10<br />
<table border="1" width="1000" >
        <tr>
                <th width="250">Row #1</th>
                <th width="250">Row #2</th>
                <th width="250">Row #3</th>
                <th width="250">Row #4</th>
        </tr>
        <%for(int i=0; i<100; i++){%>
        <tr>
                <td>############<%=i%></th>
                <td>============<%=i%></th>
                <td>************<%=i%></th>
                <td>@@@@@@@@@@@@<%=i%></th>
        </tr>
        <%}%>
</body>
</html>