Kuro-san: 更新日誌

[JavaScript] 表の見出し行を固定する方法

近代妙好人伝関連年表を更新しました。

上下に長い表は、Excelでやるように、見出し行を固定して、中身だけをスクロールできると便利です。

以前は、表の見出し行を固定するために、フレームを使ったバージョンを別途作っていました。

しかし、Mozilla Firefox では CSS で tbody の overflow 属性を auto にすれば簡単にできることがわかりました。

ところが、IEではこの方法が使えないようです。ちょっと調べた結果、IEで見出し固定で表をスクロールするには というページに書かれている方法で、JavaScript を使えばIEでもなんとか見出し行固定を実現できることがわかりました。

JavaScript コードは prototype.js を利用して書きました。→ mnempu.js.txt

・本体の表を置く div 領域の上に、見出し行だけの表を置く div 領域を作っておく。
・本体の表は、見出し行を入れる thead と、本体を入れる tbody に分けて構成しておく。

この状態で、

・表本体の div 領域の overflow 属性を auto にし、高さを設定する。
・見出し行用の div 領域に table を作り、 Element#cloneNode で 本体の表から thead をコピーする。
・各列の幅を調整する。
・本体の表の見出し行を非表示にする。
・ウィンドウをリサイズしたときに表の高さと幅を再調整するイベントハンドラを登録しておく。

といったことをしています。

なお、Mozilla Firefox ではどういうわけか見出し行の列幅の調整がうまくいかないので、もともとある機能 (tbody の overflow 属性を auto に) を使うことにしました。ただ、これだけでは表の右端がスクロールバーに隠れてしまうので、右マージンを調整しています。

初めは、表本体のデータを動的にJSON形式から変換して…などとも考えていたのですが、SEO的に好ましくないのでやめました。私のホームページのアクセスログを見ると、この年表にある語句がサーチエンジンにヒットして訪れている人が多いようなので。

表示がおかしい場合はご連絡ください。