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を活用されてみてはいかがですか?

関連記事

  1. Product Builder

    JavaScript

    カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

    Product Builderは、カスタマイズ性に優れたオンラインスト…

  2. nanoGALLERY
  3. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  4. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  5. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  6. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP