テーブルにExcelのようなスクロール機能を付加する その2

その1はこちら

前回はCSSのみを使ってテーブルのヘッダを固定し、明細行のみをスクロールさせる方法を紹介しましたが、今回はそれの応用編です。今回のは、ヘッダを固定して明細行だけをスクロールさせるのは同じなのですが、横スクロール機能がついています。しかも任意の列だけは固定でスクロールしません。Excelでもウィンドウの固定等でできますね。なにはともあれサンプルをご覧ください。

http://hoso.homelinux.net/scroll2.html

原理としてはdivタグのスタイルにoverflowを指定してスクロールバーを出現させた後、onscrollイベントで他のdivタグをスクロールさせている(同期を取っている)という事です。このサンプルではonscrollとdivタグに書いていますが、onscrollプロパティに関数をバインドしてもスクロールと同時に指定した関数が呼び出されます。

document.getElementById('divTagId').onscroll = onscrollHandler;
function onscrollHandler() {
  //scrollTopやscrollLeftを同期するコード
}

通常横スクロールは使いづらいので採用しませんが、画面に表示したい列数があまりに多く、1行を2段にしても表示しきれない場合に、苦肉の策で横スクロールを提案しています。その時、全ての列がスクロールしてしまうと、後半のデータがどのデータにひもづいているのか分からなくなるので、キーとなる項目だけ固定表示させます。

横スクロールを使わない解決方法は、列数を減らす、列の幅を固定する、列の内容を切る、フォントを小さくする、1行を2段(〜3段)で表示する、アンカーをクリックすると詳細がポップアップ表示されるようにする、カーソルを乗せると詳細をフローティング表示する等考えられますので、要件に合った方法を提案・採用すると良いと思います。フレームやインナーフレームは弊害が多いので最初から選択肢に入れないのが私流です。

どこかで有効活用できそうでしたら是非お試しください〜。