テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ

レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に
要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、
スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと
レイアウトに苦労することがよくあります。

そんなテーブルをレスポンシブ対応させる際に
いろいろと便利に使えそうなjQueryプラグインを
まとめて自分用メモとして紹介してみます。

Basic Table (jQuery Responsive Tables)

まず最初は「Basic Table」。

画面幅に応じて見出し要素を複製するかたちで
テーブルを項目の並びを整えて収めてくれます。

様々なレイアウトパターンが用意されていて
テーブルが長くなる場合にはスクロール制御する機能もあり、
いろいろと活用できそうです。

続いて「Responsive Tables」。

画面幅に応じて見出し要素を左に固定し
右側のエリアが横スクロールする形状のテーブルに変化させてくれます。

表示する項目数が多くあったり、中に入るテキスト量が多かったりして
テーブル全体が横に長くなってしまう場合にとても便利に使えそうです。

続いて「FooTable」。

画面幅に応じて表示項目を折り畳み
「＋」をクリックさせることで
アコーディオンのように展開する形状のテーブルに変化させてくれます。

表示要素が少なくなることで
テーブル全体がコンパクトな印象になります。

この「FooTable」はアドオン機能も用意されており
アドオン用のJSファイルを別途読み込むことで
ソート機能やフィルタ機能を実装することも可能になるようです。

続いて「jTableScroll」。

こちらはレスポンシブとはちょっと違うかもしれませんが
テーブルの「thead」と「tfoot」要素を固定して
中心のテーブル要素のみスクロール表示してくれます。

限られたスペースで項目名などを固定して表示したい時に
とても便利に使えそうです。

以上4点、
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインの紹介でした。

jQueryプラグインではないですが
レスポンシブWebデザインでテーブルを使う時の小技として
「Design Spice」さんの記事もとても参考になるのでメモしておきます。

テーブルをレスポンシブに対応させる際にぜひ。。。