Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

HTML/css

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

投稿日:2021年4月12日 更新日:

<目次>

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

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

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

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

(動画)Stickyの動画

(1-1) 構文

要素を固定するためには、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」も必要になります。
 

目次にもどる

(1-2) サンプルプログラム

(1-2-1) css

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

@charset "UTF-8";

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

(図121)

目次にもどる

(1-2-2) 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>

(図122)

目次にもどる

(1-3) サンプルプログラム実行結果

●初期状態

(図131)

●指定の閾値未満の位置におけるスクロール
表の先頭行(ヘッダー)がブラウザのウィンドウのtop: 0の位置を通過する前は、スクロールに伴いヘッダーが移動していきます(position: relativeに相当する挙動)。
 
(図132)

●指定の閾値以上の位置におけるスクロール

今回は閾値は「top: 0」を指定しているので、表の先頭行(ヘッダー)がブラウザのウィンドウのtop: 0の位置を通過した後は、ヘッダーがtop: 0の位置に固定される動きになります(position: fixedに相当する挙動)。

これで当初の目的だった「表のヘッダーをスクロール時に固定」する挙動を達成しています。

(図133)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-HTML/css

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

HTMLで<a>要素のリンクを中央寄せする方法

<目次> (1) HTMLで<a>要素のリンクを中央寄せする方法  (1-1) 構文  (1-2) サンプルプログラム  (1-3) サンプルプログラム実行結果 (1) HTMLで< …

JSP ServletでForm認証時にcssが上手く適用されない事象の対処メモ

<目次> (1) JSP ServletでForm認証時にcssが上手く適用されない事象の対処メモ  (1-1) 発生状況・エラーメッセージ  (1-2) 原因  (1-3) 対処  (1-4) 結果 …

HTMLでテキストボックスの左端を揃える方法

<目次> (1) HTMLでテキストボックスの左端を揃える方法  (1-1) 方針&構文  (1-2) サンプルプログラム (1) HTMLでテキストボックスの左端を揃える方法 HTML画面(例は.j …

JSPでcssが適用されない(Resouce interpreted as Stylesheet but transferred with MIME type)事象のトラブルシューティング記録

<目次> (1) JSPでcssが適用されない(Resouce interpreted as Stylesheet but transferred with MIME type)事象のトラブルシューテ …

  • English (United States)
  • 日本語
Top