tableで組んだフォームをレスポンシブですっきり見せる方法

窮屈に見えてまうかも…

 

スポンサーリンク

 

PCでよく見るお問い合わせのフォーム画面、


ごく一般的なフォームですね

 

ところがこれをスマホで見たとき、下図のようになりなんとなく窮屈で読みにくさを感じてしまいます。


見出し部分が狭くなり、窮屈で読みづらい…

 

個人的には見出しセル(<th>〜</th>部分)と入力部分データセル(<td>〜</td>)を1カラムで表示した方がすっきりとして見やすいかと思い、下図のようにしています。


スマホで見る場合には2列(2カラム)から1列(1カラム)に

 

そこで、スマホ(場合によってっはタブレット)でフォームを組んだときに個人的よく適用するCSSの記述を紹介します。

 

基本はこれだけ

スポンサーリンク