レスポンシブtableテスト

画面やウィンドウサイズが小さくなっても、tableの情報が見られなくなったり、本来意図したカラムの幅を突き破らないようにする方法。

スクロールの仕組みは単純で、tableを包含するようにしたdivにwidthを設定してoverflow: scroll;を設定したのみです。

地域 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬
関西 大阪府 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低
京都府 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高
兵庫県 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低
滋賀県 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高
奈良県 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低
和歌山県 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高

上の表は、縮小しない状態の表の幅である1410pxで左右にスクロール可能という注記も表示させています。

地域 1月 2月 3月 4月 5月 6月
上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬 上旬 中旬 下旬
関東 茨城県 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低
栃木県 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高
群馬県 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低
埼玉県 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高
千葉県 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低
東京都 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高 高
神奈川県 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低 低

同様に760pxで注記が出るように設定しています。

copyright webutubutu.com