HTMLテーブルのヘッダを「行列固定」する方法（FixedMidashi）

業務系のシステムでは、扱っているデータが多いため、一覧表が巨大になることがよくあります。WEBベースで開発している場合は、一覧表をHTMLテーブルで作ることが多いかと思いますが、表が巨大だと上下左右にぐりぐりスクロールして閲覧することになり、行や列のヘッダ(見出し)が見えなくなってしまいます。エクセルのウインドウ枠(行列)の固定のように出来ればいいのですが、HTMLではこれが簡単にはできません。そこで今回は、HTMLテーブルのヘッダを行列固定する方法を調べてみました。

FixedMidashi

jQueryプラグインやCSSでの実装、自前でテーブルを分割して擬似的に行列固定など、色々試してみましたが、巨大な表ではなかなかうまくいかず、最終的に行き着いたのは FixedMidashi でした。現時点(2016年3月17日)でおそらく最強の HTMLテーブルヘッダ固定ツールです。

FixedMidash のサンプル

FixedMidash の特徴

FixedMidashi は JavaScript で書かれていて、以下のような特徴があります。

• FixedMidashi の導入は数行のコードを追加するだけ
• table のコードはそのままでOK
• colspan や rowspan を多様していてもOK
• 行列固定の境界のスタイルを指定できる
• 用途によって body モードと div モード（または混合モード）が選べる

FixedMidashi の使い方

簡単に FixedMidashi の使い方をメモしておきます。詳細は開発者の方のページをご参照ください。分かりやすくしかも日本語です(^^)

はじめに、Vectorから「Fixed Midashi」をダウンロードします。

HTMLファイルに、ダウンロードした「fixed_midashi.js」をインクルードします。

<script src='fixed_midashi.js'></script>

table タグに「_fixedhead」属性を追加します。「rows」は固定する行数「cols」が固定する列数です。

<table _fixedhead='rows:2; cols:1'>

ページ読込み時に FixedMidashi.create() を実行するようにします。

<script>
window.onload = function()
{
    FixedMidashi.create();
};
</script>

 
以上でHTMLテーブルヘッダの行列固定完了です。

ご参考までに FixedMidash を使った HTMLテーブルのサンプルです。_fixedhead 属性に「border-color:gray; border-width:2px;」を追加して、エクセルのウインドウ枠の固定っぽくしてみました。
FixedMidash のサンプル

終わりに

HTMLテーブルのヘッダ行列固定は、WEBプログラマーを悩ませる要望の１つではないでしょうか？そんな悩みも FixedMidashi で解決ですね！