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

AniX優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」前のページ

アニメーションとともにアイテムが一つずつ現れる「t-scroll」次のページt-scroll

関連記事

  1. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  2. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  3. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  4. no-image
  5. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  6. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP