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. Circular Slider
  2. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  3. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  4. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  5. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  6. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP