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

2016年3月17日  カテゴリー:プログラム  タグ: ,
Pocket
LINEで送る

業務系のシステムでは、扱っているデータが多いため、一覧表が巨大になることがよくあります。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」をインクルードします。

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

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

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

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

終わりに

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

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です