レスポンシブデザインのtableのあしらい
レスポンシブデザインのtableのあしらいについてなのですが、お問い合わせフォームなどでよく使われる2列のテーブルの場合、僕はdisplay:block;にします。
PCのレイアウト
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.nomal-table { border-top: 1px solid #e3e3e3; border-left: 1px solid #e3e3e3; width: 100%; } .nomal-table th, .nomal-table td { border-bottom: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; padding: 2%; } .nomal-table th { background: #fafafa; color: #555!important; } |
スマートフォンのレイアウト
1 2 3 4 5 6 |
@media only screen and (max-width:601px) { .nomal-table th, .nomal-table td { display: block; width: 96%; } } |
下図のように行にも列にも項目があるようなテーブルはそういうわけにはいきません。ではどうするべきか?
- 対応できるところは対応する
- 文字サイズを落としてなんとかする
- そのままにしておく
- 項目を減らす
- モバイル向けにコンテンツを作りなおす
レスポンシブデザインを採用するのならモバイルファースト的考えで項目を一つ見出しにでもしてコンテンツを作りなおすのが正解だと思います。タブでの切り替え等を実装しても親切かと思います。
- 2013年10月16日水曜日
- :Naruhiko Wakai
comments