HTMLのソースを全く変えずにtableの配置を縦並びにする方法
結論から言おう。実現可能だ。
一般にこの方法を実現したいならdivを使ってやる方がいいと言われている。その通りで、最初から作るならdivでやるべきだ。
でも、フォームのソースが元々あって、そこをどうしても変更できない場合や、CSSだけで対応する必要がある場合もあるだろう。
なので、今回はCSSだけで実現する方法を紹介。
手軽なやつだと、position absoluteを使う方法と、 display blockを使う方法がある。
CSSに1つ記述を追加するだけ
table, tbody, tr, th, td {
display: block;
}
これだけ。
ちなみに、tfootやtheadを使っている場合は、それも含めてdisplay block してやるといい。
IE6,7,8まで含めて対応したい場合はtableのブロック要素化が効かないかもしれない。
そんな時には、
IE6,7,8,9だけCSSで違う記述を反映させる方法
この辺を参考に。
レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装する
テーブルを縦並びにするだけなら先ほどの display blockだけで大丈夫だが、PCでは普通のテーブル、スマホでは縦並びにしたい場合の対応も考えよう。
まず、レスポンシブデザインを考えるに辺り、メディアアンカーを覚えなければならない。
・PCで適用されるCSS
@media screen and (min-width:601px) { /*601px以上*/
この間にPC用のCSSを書く。
}
・スマホで適用されるCSS
@media screen and (max-width:600px) { /*600px以下*/
この間にスマホ用のCSSを書く。
}
という感じ。
「スマホ用」「PC用」と言っているが、本来の意味は、
「画面サイズが600以下の時はこのCSSだよ」
「画面サイズが601以上の時はこのCSSだよ」
という事だ。
数字は自分で勝手に変えてもいい。タブレットも分けたい場合などには、3つにしたりすることもできる。
@media screen and (min-width: 500px) and (max-width: 800px) {
画面サイズが500～800の間適用されるCSS。タブレット用とか？
}
でも、昨今のスマホの画面サイズからいくと、600pxで分けるのがおすすめ。
今回のスマホ時にだけテーブルを縦に並べたいなら、
@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
table, tbody, tr, th, td {
display: block;
max-width: 98%; /*スマホ画面ほぼ一杯に広がる感じ*/
}
}
としてやれば、
こうなる。PC版はそのまま。
ちなみに、 max-width:98%; とかは自由に変えてくれ。
overflow:hidden; なんかも使えるかもしれない。
メディアアンカーの外にテーブルの幅を指定している場合は、上記スマホ用CSSを追加しても効かない場合がある。その場合は
@media screen and (min-width:601px) { /*601px以上(PC用)*/
table {
width: 680px; /*PC版の横幅*/
}
という風に、PC用メディアアンカー内に移動すること。
