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. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  2. Babylon Grid
  3. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  4. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  5. Image Lightbox

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP