swk's log - HTML の table で，ヘッダを固定にしてデータ部だけスクロール

* HTML の table で，ヘッダを固定にしてデータ部だけスクロール [tech][firefox] 6 users

ソート [2006-07-05-2] に引続き，

行数の多い表の場合，ヘッダ部がスクロールアウトしてしまわないように固定したくなる．

というようなニーズもやっぱり結構あって，実際いろんなところでそういう機能を実現する JavaScript のコードが公開されている．いくつか当たってみた中で，一番気に入ったのはこれ:

• http://d.hatena.ne.jp/Mars/20050115#p1

気に入った理由は，

• 比較的レイアウトが崩れない
• ブラウザ依存が少ないっぽい (といっても IE と Firefox しか試してないけど)
• 日本語が入ってても崩れない

って要するに崩れないことが重要．他の方の実装も含めて，要するにヘッダ部と本体とを分離して別の table 要素にして，本体だけにスクロールバーをつける，というのが動作原理なので，列幅の再現性をいかに高くするかがポイントになる，のだと思う．ここで紹介されているコードは，(やっぱりちょっとはズレる場合があるのだけど) かなりイケている，と思う．ありがたく使わせて頂いております．

---

メモその1:

テーブルの height は px 単位で指定するようになっている．画面全体に対するパーセンテージで指定できると便利かな，と思って

newDiv2.style.height = tHeight+'px';

のところを 'px' じゃなくて '%' にしてみたのだけど，doctype スイッチ [2005-11-15-2] に引っかかるようになってしまった．doctype 宣言にシステム識別子がある場合，'px' だとスクロールバーが出るけど '%' だと出ない．システム識別子がなければ，どちらでもスクロールバーが出る．謎．

メモその2:

作者の Mars さんも書いておられますが，このままだと印刷するときちょっと困る (全体が印刷できない)．というわけで，かなりアドホックですが，こんな回避策をとってます．

(以下の実装は obsolete → メモその3 へ)

まずグローバルな変数を 2 個用意．

var newDiv2;
var myHeight;

Tscroller() の中で newDiv2 をローカル変数として宣言するのをやめて，このグローバル変数を使うことにする．つまり単に

var newDiv2 = document.createElement('div');

を

newDiv2 = document.createElement('div');

にする．それから Tscroller() の中のどこかで

myHeight = tHeight;

してやる．最後に

function ToggleScroll()
{
  if (newDiv2.style.height == '') {
    newDiv2.style.height = myHeight + 'px';
  } else {
    newDiv2.style.height = '';
  }
}

な関数を定義しておいて，適当な場所から href なり onclick なりで呼べるようにしておく．これでスクロールバーをオン・オフできます．たぶん．

もっときれいに作れる気もするけど，最小の改造でやるならこんなところだろうか．

メモその3 (追記):

メモその2 がちょっとあまりにもアドホックすぎた気がする．テーブル 2 つ以上扱おうとしたらもうダメだし．もうちょっとだけ真面目に書きます．

メモその2 で書いた改造はすべて撤廃，改めて元の Tscroller() の最後あたりに以下を入れて，

newDiv2.height_saved = tHeight;

以下のような関数を定義する．

function ToggleScroll(tid)
{
  var newDiv2 = document.getElementById('D_' + tid + '_B');
  var tHeight = newDiv2.height_saved;

  if (newDiv2.style.height == '') {
    newDiv2.style.height = tHeight + 'px';
  } else {
    newDiv2.style.height = '';
  }
}

引数には Tscroller に与えたのと同じく，テーブルの id を渡します．

<a href="javascript:ToggleScroll('tb')">
Click here to toggle the scroller</a>. 

div に height_saved なんていうプロパティを勝手に作っているところが非常にうさんくさい．こういうことするのって規格上はダメなんですかね? 一応 IE と Firefox では動いている模様．