ページを読み込んだ時の画面幅でtableの表示方法を変える。
768px以上なら普通にtableで表示。768以下の場合はタグをdivに置き換えて、リストっぽい表示にする。

cssだけでとか、色々な方法があるけれど、軽量でシンプルな方法を探していて、Design Spiceさんの下記のページの「jQueryでタグを書き換える」方法に。1ページに複数のtableがあるページがあったので、ちょっとjsをアレンジした。

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
http://design-spice.com/2012/11/01/responsive-table/

※ページを読み込んだ時の画面幅なので、読み込んだ後に画面サイズを縮小しても変化しない。ま、タブレットやスマホで画面サイズをグリグリ動かせるわけじゃないのでOK。

htmlはこんな感じ。tableタグのclassに「responsive_table」を指定する。

jQueryと一緒に使用する。tableの各タグの置換えは、ページ全体の構造や好みで変えれば良いと思う。

スタイルシート。

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です