floatThead

JavaScript

テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

floatTheadはテーブルのヘッダーを固定することができるjQueryプラグインです。スクロールしてもヘッダーだけは固定したまま表示したいという人にオススメです。inner scroll bars、またはwindow scrollingに対応しています。

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

関連記事

  1. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  2. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  3. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  4. JavaScript

    リストのテキストを1つずつ垂直にスライドさせていくjQueryのティッカー「Totem Ticker…

    おもしろいですね、これ。リスト化したli要素を1つずつ垂直方向にスライ…

  5. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

最近の記事

  1. CHA-SAJI
  2. SLE-19P
  3. Soundcore Ace A0
  4. Fire 7 タブレット

アーカイブ

PAGE TOP