FooTable | Themergency

レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」
レスポンシブなWEBデザインを作る際に一番やっかいなのではというのが、テーブルですね。
折り返しが出来ないのでどうやってレイアウトしようと悩むところですが、画面が小さい時は主要な物を選んで出す、といった事ができます
テーブルのth 要素で出す出さないの定義をすることができて、あとはプラグイン関数で初期化するだけというお手軽さです。

iPhone。主要な部分を見せつつ、折畳みで他の要素もみせるUI


ちょっと画面の大きなタブレットでの画面。表示要素は多くなるけどまだ折畳みで他の要素をみせる状態



PCの大きなディスプレイですべて開いた状態



次のように、data-class、data-hide の属性を付けておくことで挙動をカスタマイズ可能です



関連エントリ

• WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」
• レスポンシブなナビゲーションの見本やチュートリアル
• レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」
• レスポンシブ対応等済みのフレッシュ＆フリーなWordPressテーマ集
• 使えそうなレスポンシブ対応のWordPressテーマ３０