【CSS】table(表)を2列から1列に切り替えるCSS（レスポンシブ）

WordPress(ワードプレス)

2022.07.04

この記事は約2分で読めます。

お問い合わせフォームなどで、画面サイズが小さくなったときに１列に切り替える方法です。

display:block;を使う

いつもブログを見てくださっている皆さんはお気付きかもしれませんが、結論「display:block」だけで、いけそうな気がします。念のため横幅を100%に指定しておきます。

[rml_read_more]

table td, table th {
    width: 100%;
    display: block;
}

いけました…！

このままだと、画面サイズに関係なく横一列になってしまうので、メディアクエリを指定します。

@media screen and (max-width: 640px) {
table td, table th {
    width: 100%;
    display: block;
}
}

これで、画面サイズ640pxで切り替わります！

ついでに、項目名を左寄せにしておきます。これは１列になったときに左寄せすれば良いので、メディアクエリ内に設定します。text-align: left;を追加すればいけそうです。

@media screen and (max-width: 640px) {
table td, table th {
    width: 100%;
    display: block;
    text-align: left;
}
}

項目名（ラベル）が左に揃いました！あとは枠線を消すなど調整しても良さそうですね😃

表をスマホで表示させた場合に１列で表示させたい、といった時に使える方法です。

ご参考ください😃