FixedMidashi トップページ

TOP    注意事項・その他    関数説明    デモページ    動作確認用ページ    ダウンロード

目次

概要

  1. FixedMidashi は、html table の見出し(ヘッダ)を固定するための JavaScript です。 html テーブルのヘッダを簡単に固定することができます。 It can be easily fixed the header of the html table. 列の固定も可能です。
  2. 固定する見出し部分を別 table にコピーし、それを元 table の上に重ねて表示する、 という方法で実現しています。
  3. body のスクロールに対して固定見出しを制御する方法と、 対象 table の親 div のスクロールに対して固定見出しを制御する方法が あります(前者を body モード、後者を div モードと呼びます)。
  4. div モードの場合、body からはみ出ないよう div を自動リサイズします(サイズ未指定の場合)。
  5. 特別なスタイルシートは必要ありません。 各セル幅を固定にする必要もありません。
・適用例
 bodyモードの例 (固定行:1、固定列:2)
 NAME ABCD
1Name1 A0001B0001C0001D0001
2Name2 A0002B0002C0002D0002
3Name3 A0003B0003C0003D0003
4Name4 A0004B0004C0004D0004
(見出しが見えなくなるまでスクロールしてみてください)
 divモードの例 (固定行:1、固定列:2)
 NAME ABCDEFG HIJ.XYZ
1Name1 A0001B0001C0001D0001E0001F0001G0001 H0001I0001J0001 ... X0001Y0001Z0001
2Name2 A0002B0002C0002D0002E0002F0002G0002 H0002I0002J0002 ... X0002Y0002Z0002
3Name3 A0003B0003C0003D0003E0003F0003G0003 H0003I0003J0003 ... X0003Y0003Z0003
4Name4 A0004B0004C0004D0004E0004F0004G0004 H0004I0004J0004 ... X0004Y0004Z0004
5Name5 A0005B0005C0005D0005E0005F0005G0005 H0005I0005J0005 ... X0005Y0005Z0005
6Name6 A0006B0006C0006D0006E0006F0006G0006 H0006I0006J0006 ... X0006Y0006Z0006
7Name7 A0007B0007C0007D0007E0007F0007G0007 H0007I0007J0007 ... X0007Y0007Z0007
8Name8 A0008B0008C0008D0008E0008F0008G0008 H0008I0008J0008 ... X0008Y0008Z0008
9Name9 A0009B0009C0009D0009E0009F0009G0009 H0009I0009J0009 ... X0009Y0009Z0009
(タブレット端末の場合は表内をスライドしてみてください)
 混合モードの例 (固定行:1、固定列:2)
 NAME ABCDEFG HIJ.XYZ
1Name1 A0001B0001C0001D0001E0001F0001G0001 H0001I0001J0001 ... X0001Y0001Z0001
2Name2 A0002B0002C0002D0002E0002F0002G0002 H0002I0002J0002 ... X0002Y0002Z0002
3Name3 A0003B0003C0003D0003E0003F0003G0003 H0003I0003J0003 ... X0003Y0003Z0003
4Name4 A0004B0004C0004D0004E0004F0004G0004 H0004I0004J0004 ... X0004Y0004Z0004
(横は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とみなします)。
cols
固定する列数(0~10)を指定します。省略時は 0 です。 以下の場合は無視します(0とみなします)。
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 を自動リサイズします。

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
▲ページトップ