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. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  2. Rainbow.js
  3. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  4. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  5. no-image
  6. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP