ドーモ、shibusoです。原作読まずにアニメ見たら何を見ているのかよく分からないことになりました、忍殺。
前置き
たまにHTMLのテーブルでヘッダーを固定して欲しいという要望が出ます。ExcelとかGoogleスプレッドシートとかでテーブルのヘッダーを固定出来るのだから、きっとそんなのすぐに出来るだろうという考えなのでしょう。
しかしフロントエンドエンジニアからしたら「うわ、出た」という感じではないでしょうか。最近ではJSのライブラリがあったりして無理難題というレベルではなくなりましたが、それでも基本的にはあまりやりたくないところ。しかも行の固定はあっても列の固定は無かったりするものが多いです。
今回私が担当した案件では行と列の固定に加えて、範囲選択を出来るようにして欲しい、という注文がきました。行と列の固定はそれでも探せばいくつかライブラリが見つかりましたが、範囲選択というところがネックでした。加えて対応ブラウザはIE8以上。そんな中出会ったのがFixedMidashiです。日本人しか分からなそうなお名前です。
FixedMidashiのメリット
FixedMidashiが他のヘッダー固定ライブラリと一番違うと感じたのは、表示範囲に応じて見出しの出し分けをしている点です。見出しが見える範囲にある場合は通常のテーブルを表示し、範囲が見えない場所までスクロールすると予め作成された見出しだけを切り出したテーブルを表示するようにしています。
この実装のおかげでスクロールしていない状態では通常のテーブルと変わりなく範囲選択することが可能となりました（通常のテーブルを表示しているのだから当たり前といえば当たり前ですが）。使用できる状況は限定されているとはいえ、要望を満たすことが出来たため大変助かりました。
その他にも色々属性を指定するでカスタマイズすることが可能です。今回私は固定する列を2つに指定したり、borderを指定したりして利用しました。
なお今回はdivモードを利用した場合のお話です。bodyモードは試していないためbodyモードをご利用の場合は少し勝手が違う可能性があります。またバージョン1.8から混合モードが追加された模様ですが、こちらもまだ試していません（スマホに適しているみたいです）。
FixedMidashiの使い方
基本的な使い方はFixedMidashiのホームページでご確認ください。この手のJSライブラリをVectorからダウンロードするというのが個人的には斬新でした（Vectorには90年代、2000年代前半に大変お世話になった記憶が）。
使い勝手については下の方にデモを置いていますが、FixedMidashiのホームページにも各モードでのデモページが用意されているのでそちらでもご覧いただけます。
一箇所このライブラリ自体をカスタマイズした方が良いと個人的に感じたのは、使用する時に指定する「_fixedhead属性」です。これをこのまま使用するとHTML5のvalidatorに怒られます。代わりにdata-fixedheadで指定できるようにカスタマイズすると怒られないで済みます。
単純に"_fixedhead"を見ているところを"data-fixedhead"に置換するだけで動きました。修正版の配布は禁止されているのでここには置けません、あしからず。
FixedMidashiのデモ
GitHub Pagesに簡単な紹介用のテーブルを作ってみました。
まとめ
FixedMidashiはシンプルにテーブルの見出しを固定させたい場合、非常に楽に導入できます。ここでは紹介しませんでしたが、他にも色々な関数が用意されていて、それらを用いればより便利に使用することが可能となります。特にsyncValueとsyncStyleはフォームを含んでいたり、途中で表示に変更が生じる場合にはありがたい機能です。
もし行と列を共に固定する必要が出た場合に利用してみてはいかがでしょうか。