伊豆・伊東情報館 Blog

前回は「table」の「td」タグを縦組みに変更して、
レスポンシブ化に対応させたんだけど…
レスポンシブ化　table編

こんな感じの表を
上記の方法でレスポンシブ化させると
無駄に縦長な表になる事に。

横方向で比較したい部分もあるしね。

ちなみに、width指定を解除する等して
レスポンシブ化させると、こんな感じ。

日本には縦読みの文化もあるから
「効果」の部分が読みにくい読みにくい。
┐(-_-;)┌

ただ…
この状態でもググる先生からは
モバイルフレンドリーとして「OK」がもらえます。

まぁ、人間に読みにくくても
comに読みやすい（解釈しやすい）か？って話ですからね。

とはいえ、さすがにこのままじゃねぇ。って事で
レスポンシブ化　img編　の手法を採用する事に。

widthを表示に差し障りないサイズに指定し、
overflow-x: scrollで横方向にスクロールできるように。

そのままだと、目で追うのが大変なので
背景色を交互に変更してみました。

付け焼き刃感は否めないけど…
まぁ、仕方無いでしょう。　(*>ｖ<)