jTableScroll

JavaScript

ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

jTableScrollはヘッダーとフッターを固定したままスクロールをすることが可能なテーブルを実装することができるjQueryプラグインです。目的の値を見失うことなくチェックできるので、とても便利ですね。

jTableScroll

jTableScroll

縦や横にスクロールしても表示されている値に対応したヘッダーやフッターがちゃんと表示されます。これなら値がたくさん並んでいても安心して探すことができますね。

実際のマークアップはこんな感じでtheadにヘッダーを、tbodyにデータを、tfootにフッターを指定していきます。

<table id="tableToScroll">
    <thead>
        <tr>
            <th>ヘッダー1</th>
            <th>ヘッダー2</th>
            <th>ヘッダー3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>値1</td>
            <td>値2</td>
            <td>値3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>フッター1</td>
            <td>フッター2</td>
            <td>フッター3</td>
        </tr>
    </tfoot>
</table>

あとはjTableScrollをセッティングすればOKです。

<script src="jquery.jTableScroll-1.6.0.js"></script>
<script>
    $('#tableToScroll').jTableScroll(options);
</script>

使い方もシンプルだしオプションでwidth、height、backgroundcolorなどを設定することも可能です。

というわけで、ヘッダーとフッターを固定することができるテーブルを実装したい方は、是非jTableScrollを活用されてみてはいかがですか?

Filterable Product Gridレスポンシブなグリッドレイアウトでタッチにも対応した「Filterable Product Grid」前のページ

Pocket(Macアプリ・Webブラウザ)で便利なショートカットキー次のページPocketのショートカットキー

関連記事

  1. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  2. Responsive Multi Menu
  3. RELLAX

    JavaScript

    超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

    RELLAXは、滑らかなパララックスを実装できるバニラJavaScri…

  4. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  5. flexible-bootstrap-carousel
  6. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP