ホームページ(WEBサイト)制作、CMS構築などをおこなっております。（滋賀・京都・大阪）

ある案件で使えるかな、と思って探していて、実際、思う動作は実現できたのですが、結局この話は没になってしまいました。

ということで、もったいないのでメモ代わりに公開しておきます。

<やりたいこと>

・テーブルの上と左にヘッダーがある。
・表の中身はかなり縦にも横にも長くなる可能性があり、スクロールできるようにしたい。
・ただし、ヘッダーは常に表示させておきたい。

要はエクセルの「ウィンドウ枠の固定」のようなことです。

これをどうやって実現させようか、ということで色々探していたのですが、なかなかうまい情報に当たらず・・・。
最終的にたどり着いたのが、

http://hikazoh.tdiary.net/20050303.html

このページでした。

ただし、このコードのサンプルは、上部のヘッダーのみ固定できるというものだったので、ちょっと改造しました。

もう一つ表示させるヘッダーを「head2」と名付け、

  head2_obj.scrollLeft = detail_obj.scrollLeft;
  head2_obj.scrollTop  = detail_obj.scrollTop;

というようなコードを追加しました。

コードのサンプルを置いておきます。
（一応IE6,IE7,Firefoxで動作確認済みです）

scroll_sample.html
main.css

ポイントは、スタイルシート（CSS）の
　　overflow:hidden;
と、
javascriptの、
　　スクロールバーのコントロールをイコールで同期させる、と言うところですね。
なるほど～。
と、感心しました。

もし同じような情報を探している方がいて参考になれば幸いです。