FixedMidashi - htmlテーブルヘッダの固定

FixedMidashi トップページ

概要

FixedMidashi は、html table の見出し(ヘッダ)を固定するための JavaScript です。列の固定も可能です。
固定する見出し部分を別 table にコピーし、それを元 table の上に重ねて表示する、という方法で実現しています。
body のスクロールに対して固定見出しを制御する方法と、対象 table の親 div のスクロールに対して固定見出しを制御する方法があります(前者を body モード、後者を div モードと呼びます)。
div モードの場合、body からはみ出ないよう div を自動リサイズします(サイズ未指定の場合)。
特別なスタイルシートは必要ありません。各セル幅を固定にする必要もありません。

・適用例

bodyモードの例 (固定行:1、固定列:2)

	NAME	A	B	C	D
1	Name1	A0001	B0001	C0001	D0001
2	Name2	A0002	B0002	C0002	D0002
3	Name3	A0003	B0003	C0003	D0003
4	Name4	A0004	B0004	C0004	D0004

(見出しが見えなくなるまでスクロールしてみてください)

divモードの例 (固定行:1、固定列:2)

	NAME	A	B	C	D	E	F	G	H	I	J	.	X	Y	Z
1	Name1	A0001	B0001	C0001	D0001	E0001	F0001	G0001	H0001	I0001	J0001	...	X0001	Y0001	Z0001
2	Name2	A0002	B0002	C0002	D0002	E0002	F0002	G0002	H0002	I0002	J0002	...	X0002	Y0002	Z0002
3	Name3	A0003	B0003	C0003	D0003	E0003	F0003	G0003	H0003	I0003	J0003	...	X0003	Y0003	Z0003
4	Name4	A0004	B0004	C0004	D0004	E0004	F0004	G0004	H0004	I0004	J0004	...	X0004	Y0004	Z0004
5	Name5	A0005	B0005	C0005	D0005	E0005	F0005	G0005	H0005	I0005	J0005	...	X0005	Y0005	Z0005
6	Name6	A0006	B0006	C0006	D0006	E0006	F0006	G0006	H0006	I0006	J0006	...	X0006	Y0006	Z0006
7	Name7	A0007	B0007	C0007	D0007	E0007	F0007	G0007	H0007	I0007	J0007	...	X0007	Y0007	Z0007
8	Name8	A0008	B0008	C0008	D0008	E0008	F0008	G0008	H0008	I0008	J0008	...	X0008	Y0008	Z0008
9	Name9	A0009	B0009	C0009	D0009	E0009	F0009	G0009	H0009	I0009	J0009	...	X0009	Y0009	Z0009

(タブレット端末の場合は表内をスライドしてみてください)

混合モードの例 (固定行:1、固定列:2)

	NAME	A	B	C	D	E	F	G	H	I	J	.	X	Y	Z
1	Name1	A0001	B0001	C0001	D0001	E0001	F0001	G0001	H0001	I0001	J0001	...	X0001	Y0001	Z0001
2	Name2	A0002	B0002	C0002	D0002	E0002	F0002	G0002	H0002	I0002	J0002	...	X0002	Y0002	Z0002
3	Name3	A0003	B0003	C0003	D0003	E0003	F0003	G0003	H0003	I0003	J0003	...	X0003	Y0003	Z0003
4	Name4	A0004	B0004	C0004	D0004	E0004	F0004	G0004	H0004	I0004	J0004	...	X0004	Y0004	Z0004

(横はdiv, 縦はbodyのスクロールに反応して見出しを固定します。)

body モードと div モードの違いは、デモページでも確認できます。

・固定見出しの作成イメージ

行を固定する場合は①のテーブル、
列を固定する場合は②のテーブル、
行も列も固定する場合は①②③のテーブル

を作成し、元テーブルの上に重ねます。

本ドキュメントでは、①②③のテーブルを「固定見出し」と呼びます。また、固定見出しの構成要素である <table>, <tr>, <td>, テキスト等を「コピー要素」、コピー元の要素を「元要素」と呼びます。

使用方法

見出しを固定したい table に _fixedhead 属性を定義し、 FixedMidashi.create() を呼び出します。

FixedMidashi.create() は、_fixedhead 属性が定義された table の固定見出しを作成します。 div モードにする場合は、対象 table を div で囲み、div の style.overflow を auto または scroll にします。混合モードにする場合は、div モードの記述に加え、div-auto-size オプションで none または width を指定することにより高さの自動リサイズを抑止します。 _fixedhead 属性についての詳細は次節を参照してください。以下に例を記述します。

<script type="text/javascript"
  src="hoge/fixed_midashi.js"></script>

body モードの記述例

<body onLoad="FixedMidashi.create();">
  <table _fixedhead="rows:1; cols:2">
    ...

div モードの記述例

<style type="text/css" media="screen">
  div.scroll_div { overflow: auto; }
</style>

<body onLoad="FixedMidashi.create();">
  <div class="scroll_div">
    <table _fixedhead="rows:1; cols:2">
      ...

混合モードの記述例

<-- div モードの記述に加え、div-auto-size を指定します。-->
<table _fixedhead="rows:1; cols:2; div-auto-size: none;">

あなたのページに適用し、見出しが固定されることを確認してみてください。

_fixedhead 属性

name:value の形式で指定します。複数指定する場合はセミコロンで区切ります。コロンやセミコロンの前後に空白があってもなくてもかまいません。属性名は大文字・小文字を区別しません。全てデフォルトでよい場合は、<table _fixedhead> のように、= 以降は省略できます。

rows

固定する行数(0～10)を指定します。省略時は、元テーブルに <thead> がある場合はその行数、 <thead> がない場合は 1 です。以下の場合は無視します(0とみなします)。

10より大きい場合、およびテーブルの行数以上の場合
rowSpan により結合されたセルの途中の場合、例えば、本オプション(固定行数)が 1 で、先頭行に rowSpan が 2 以上のセルがある場合

cols

固定する列数(0～10)を指定します。省略時は 0 です。以下の場合は無視します(0とみなします)。

10より大きい場合、およびテーブルの列数以上の場合
colSpan により結合されたセルの途中の場合、例えば、本オプション(固定列数)が 1 で、先頭列に colSpan が 2 以上のセルがある場合

copyid (重要)

元要素に id 属性がある場合に、コピー要素に同じ id を設定するか否かを yes/no で指定します。省略時は yes です。no の場合、コピー要素に id は設定しません。元要素に id 指定のスタイルを適用している場合は yes にする必要があります (コピー要素に同じスタイルを適用するため)。本プロパティを no にする場合は、元要素に id 指定のスタイルは適用しないでください。

div-max-width, div-max-height

(div モード用) div の最大の幅、最大の高さを body の幅や高さに対する割合(50% のような形式)で指定します。 1% ～ 100% の範囲内でない場合は無視します。 div の幅や高さが指定されている場合は無効です。

div-auto-size (Ver1.8で追加)

(div モード用) div を自動リサイズするか否かを both(幅も高さもリサイズする)、width(幅のみリサイズする)、height(高さのみリサイズする)、none(リサイズしない) のいずれかで指定します。省略時は both です。 div の幅や高さが指定されている場合は無効です。本オプションにより、縦方向は body のスクロール、横方向は div のスクロールに反応して見出しを固定することができます(デモページ)。

div-full-mode

(div モード用) div の自動リサイズ時、そのサイズを常に最大(body いっぱい)にするか否かを yes/no で指定します。省略時は no です。 div の幅や高さが指定されている場合は無効です。対象 table が2個以上ある場合も無効です。

body-header-id (Ver1.7で追加) body-left-header-id (Ver1.8で追加)

(body モード用) 通常、固定列見出しの表示位置(top)は body の先頭、固定行見出しの表示位置(left)は body の左端ですが、これらのオプションで <header> などの id を指定することで、固定見出しの表示位置を設定することができます。 body-header-id で指定された DOM 要素の bottom の位置に固定列見出しを表示し、 body-left-header-id で指定された DOM 要素の right の位置に固定行見出しを表示します。ページの先頭や左端に固定ヘッダがある場合に使用してください。画面イメージを body-header-id のデモページで確認できます。

border-color, border-style, border-width

スクロールした時の固定見出しの境界のボーダースタイルを指定します。

box-shadow (Ver1.9で追加)

スクロールした時の固定見出しの box-shadow を指定します。画面イメージを body-header-id のデモページで確認できます。

class (Ver1.10で追加)

全てのコピー要素の class 属性に指定された値を設定します。この属性により、コピー要素のスタイルを設定することも可能ですが、この属性の目的は、スタイル設定よりも、要素がコピー要素か否かを確認できるようにすることです。 FixedMidashi.isFixedElement(element) でも確認することができますが、ここで指定した class 属性が設定されているか否かで確認することも可能になります。

div の自動リサイズについて

div モードで div の幅や高さが指定されていない場合、次のように div を自動リサイズします。

対象 table が body からはみ出る場合
body からはみ出ないように調整します。ただし、幅・高さともに 150px より小さくすることはありません。
対象 table が body からはみ出ない場合
div-full-mode が no の場合は table のサイズに合わせます。
div-full-mode が yes の場合は body いっぱいにします。

div-full-mode を yes にし、body の margin-right, margin-bottom を 0 にすることにより、 div のスクロールバーを body のスクロールバーのように見せることができます。画面イメージを div-full-mode のデモページで確認できます。

初版: 2012年7月21日最終更新: 2017年10月28日		Copyright (C) 2012-2018 K.Koiso
▲ページトップ

FixedMidashi トップページ

目次

概要

使用方法

_fixedhead 属性

div の自動リサイズについて