エクセルの「ウィンドウ枠固定」のような表をHTMLでつくる

ＷＥＢシステムを構築する場合に、ユーザビリティを考慮したユーザーインターフェースを検討する場合の参考情報です。

特に業務系のWEBシステムでは、データを検索して一覧表示する画面を多様することは多いと思ます。

簡単にやるなら、検索結果をＨＴＭＬのtableタグでレンダリングして表示すればよいのですが、表の列や行が非常に多い場合はブラウザのスクロールバーでスクロールして見せたとしても、列や行の見出しタイトルもスクロールされてしまって、現在どのデータを見ているか分かりにくい時もあります。

特にエクセルの使い方に慣れている方だと、

「エクセルのように『ウィンドウ枠の固定』みたいにできないの？」

という要望をいただくことも少なくありません。

そこで、表の列、表の行、表の中身（行列）をそれぞれ別のtableタグでレンダリングして、javascriptのscrollイベント処理でエクセルのウィンドウ枠の固定のような動きをHTMLで作成するサンプルです。