BLOG

レスポンシブデザインのtableのあしらい

レスポンシブデザインのtableのあしらいについてなのですが、お問い合わせフォームなどでよく使われる2列のテーブルの場合、僕はdisplay:block;にします。

PCのレイアウト

スマートフォンのレイアウト

下図のように行にも列にも項目があるようなテーブルはそういうわけにはいきません。ではどうするべきか?

  1. 対応できるところは対応する
  2. 文字サイズを落としてなんとかする
  3. そのままにしておく
  4. 項目を減らす
  5. モバイル向けにコンテンツを作りなおす

レスポンシブデザインを採用するのならモバイルファースト的考えで項目を一つ見出しにでもしてコンテンツを作りなおすのが正解だと思います。タブでの切り替え等を実装しても親切かと思います。

    Sponsored Links

    コメントを残す

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