A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA

レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」
divなブロックだったら、幅を適切に設定しておいてあげれば丁度画面の端で折り返されるところですが、テーブルをレスポンシブにするには？
って考えた時に、「う〜ん、どうやろう」となってしまうと思います。そんな際は、重要なものだけに絞って表示しちゃいましょうというスタンスのプラグイン。
幅が狭くなったら９列あったものを３列にしちゃいます。かといって、見れなくなるのは困る、という場合もあるのですが、それも解決策として提案されています。


幅を狭めるとテーブルの表示項目が絞られて見やすいまま。



見たい項目がある場合は、プルダウンからチェックボックスで項目を選べば、その列が表示されるというもの。



デモページ

なかなか考えるものですね。他にも実装方法は色々とありそうですが１つの参考にしてみるとよさそうですね。

関連エントリ

• 最初からレスポンシブなCSSデザインのHTMLテンプレート３５
• レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」
• IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」
• レスポンシブなナビゲーションの見本やチュートリアル