複数行のヘッダーにも対応してテーブルを見やすく「jquery-decapitate」
jquery-decapitateはjQuery/JavaScript製のオープンソース・ソフトウェア（2-clause BSD lisence）です。
大きなHTMLテーブルを表示していると、どのカラムが何のデータだったか分からなくなって、また上にスクロールして確認する…なんてことがあるかと思います。そんな面倒さから解放してくれるjQueryプラグインがjquery-decapitateです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 9.58.20.1375322770.png)
最初の表示です。この時点では普通のテーブルに見えます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 9.58.24.1375322774.png)
スクロールするとヘッダーが画面上部に残りました。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 9.58.34.1375322778.png)
こちらは二つのテーブルのデモ。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 9.58.39.1375322783.png)
ヘッダーの高さが違ってもちゃんと残ります。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 9.58.59.1375322787.png)
レスポンシブ対応なのでスマートフォンで見た場合も分かりやすくなります。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 9.59.08.1375322791.png)
ヘッダーが複数行であっても問題ありません。
ヘッダーが残ってくれるだけでデータの確認がとてもしやすくなります。データ操作の伴わない、一覧で表示するだけのテーブルに使うと良いのではないでしょうか。
MOONGIFTはこう見る
一昔前にこういったUIを実現しようと思うとframeを使ったりして分かりづらい仕組みで実現することが多かったです。また、10行ごとにヘッダーを差し込み直すなんて手法もありました。いずれにしてもあまり格好よくはありません。
jquery-decapitateはjQueryでテーブルを指定するだけでよく、使い方は簡単です。残り続ける訳ではなく、スクロールがテーブルの一番下まで達すれば消えてくれます。業務システムでテーブル表示を行っているところは常駐する価値があるのではないでしょうか。