レスポンシブなテーブルを簡単につくれる「Tablesaw」

Pocket

レスポンシブなデザインにする、と言ったときにやっぱり困るのがテーブルのデザインだなーと思います。列が多いとスマホで見たときにかなりキツい印象を与えてしまうし、いざスマホ向けにレスポンシブなスタイルを当てようと思うと、結構実装が面倒くさいんです。

レスポンシブなテーブルを簡単につくる

そんなレスポンシブなテーブルをつくらなければならないケースの場合はTablesawというライブラリを使うと便利そうです。

必要なCSSとJSを読み込んで<table class="tablesaw tablesaw-stack" data-mode="stack">とマークアップするだけで、上の画像のような、レスポンシブなテーブルを実現することができます。

実際に動くデモがこちらのリンクから確認できます:デモ

Cursor_と_TableSaw_Column_Toggle_Table

また、このライブラリには上の画像のようにソート機能や、画面幅が小さくなったときに挙動のカスタマイズなどいろいろな機能が含まれておりまして、そんな盛りだくさんな機能を試せるデモがこちらになります:デモ

Bowerでパッケージ管理していればRailsでも簡単に使うことができます。レスポンシブなテーブルを含めなければならない場合は検討してみてはいかがでしょうか。

filamentgroup/tablesaw