メッセージ

2015年01月10日の記事

2015/01/10(土)<table> タグのレスポンシブWebデザイン対応

約4週間前に始めたスマートフォン対応にて、レスポンシブWebデザインを構築している途上で、ここと 元ラジオ少年日誌とその他一部を除いてだいぶ出来てきたところですが、最大のネックは<table> タグの表示処理で、その分、いろいろな対処策が公開されているようです。

筆者では主に3つの手法を使いました。
1)superTable.js (Javascript) を使って、横幅を一定に保ちつつ横スクロール。
20150110_1.jpg20150110_2.jpg

表の左端や最初の行を固定表示にすることもできます。
表の部分を左フリック(指を画面上にて左にサッと滑らす)すると左に、
表の部分を右フリック(指を画面上にて右にサッと滑らす)すると右に、
スクロールします。

このJavascript は有名らしく、現在は Grid という名前に変わっていて、当方が取得したバージョンから見て、大幅に対応が改善されています。
#このJavascript にて、非推奨のものが使われているため、後日 Grid.js へ換装しないといけないかなというところです。。

20150110_3.jpg
20150110_4.jpg
もちろん、横に表示させても大丈夫です。
設置方法は、提起サイトのソースコードを見れば参考になると思います。

2)CSS にて表示体裁を変更する。
20150110_5.jpg20150110_6.jpg

左側はやや複雑なCSS で、汎用化するのはちょっと難しいかもしれません。
ちなみに元ネタ(PC版)はこんな感じ ↓
20150110_7.jpg

右側は、<thead> の左フロートと、<tbody> の block 表示で、これは CSS による <table> のレスポンシブ化手法では一般的なものの様です。
元ネタ(PC版)はこんな感じ ↓
20150110_8.jpg

探せば沢山出てくるのですが、いちいち検索するのも面倒なので、時間がとれるときにここにまとめておきたいと考えています。