floatTheadはテーブルのヘッダーを固定することができるjQueryプラグインです。スクロールしてもヘッダーだけは固定したまま表示したいという人にオススメです。inner scroll bars、またはwindow scrollingに対応しています。
floatThead
以下のページからfloatTheadの詳細や実際のデモ動作をチェックできます。
右上の「Demo」の下にある「Run floatThead」をクリックし、その下にあるテーブル内をスクロールすると、ヘッダーが固定されるのを確認できるかと思います。
通常はスクロールするとヘッダー部分も見えなくなりますが、このプラグインを使うことでこんな感じにヘッダーだけを固定して表示させることが可能です。ちなみに、スクロールは水平・垂直どちらにも対応しています。
スクロールの設定は、Overflow scrolling、Window scrolling、Responsive scrollingの全部で3種類が用意されています。
各スクロールに関する詳しいセッティング方法は、冒頭で紹介したデモページからチェックできます。
ちなみにそのページの下の方には、Overflow ScrollingとWindow Scrollingのデモも設置されているので、気になる人はこちらも合わせて確認してみてください。
floatTheadには、オプションも豊富に用意されているのでカスタマイズして使いたい人にも最適です。
主なオプション項目は、position、scrollContainer、responsiveContainer、headerCellSelector、floatTableClass、floatContainerClass、top、bottom、zIndex、debug、getSizingRow、copyTableClass、autoReflowです。
テーブルを多用するサイトなどで、ヘッダーを固定して表示させたい場合に覚えておきたいプラグインですね。ライセンスはMITとのこと。
floatTheadの詳細やダウンロードは、以下からどうぞ。
