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

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

Basic Table (jQuery Responsive Tables)


Basic Table (jQuery Responsive Tables)
デモページはこちら

まず最初は「Basic Table」。

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

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

Crafty Responsive Tables | Playground from ZURB


Crafty Responsive Tables | Playground from ZURB
デモページはこちら

続いて「Responsive Tables」。

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

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

FooTable・Themergency


FooTable・Themergency
デモページはこちら

続いて「FooTable」。

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

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

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

Mike Allison – jTableScroll


Mike Allison – jTableScroll

続いて「jTableScroll」。

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

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

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

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

【参考】レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR