【簡単】tableタグをスマホでは縦並びにする方法【レスポンシブ】

二列組のtableタグをスマホでは縦並びにしたい。
またレスポンシブになるよう、デバイス幅によって可変するようにしたい。
本記事ではCSSを使い、このような悩みを解決します。
HTMLサンプル
<table>
<tbody>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
</tr>
</tbody>
</table>
上記は二列組のtableタグ サンプルです。
thとtdが横並びにテーブル組される作りになります。
これをスマホ時、縦並び(thが上、tdが下)にしたいと思います。
CSSサンプル
@media screen and (max-width: 767px) {
table {
display: block;
width: 100%;
}
table tbody {
display: block;
width: 100%;
}
table tr {
display: block;
width: 100%;
}
table th {
display: block;
width: 100%;
}
}
スマホ時、縦並びにするCSSサンプルです。
まずメディアクエリでスマホのデバイスだけCSSを効かせるように指定します。
後は、table、tbody、tr、thにdisplay: block;、width: 100%;を指定してあげればOK。
これだけでテーブル要素をブロック要素に変更し、デバイス幅によって可変する縦並びテーブルレイアウトの完成です。
まとめ
スマホファーストでコーディングすると、PCコーディング時、縦並びから横並びにまた戻さなければいけないので、メディアクエリを使ってスマホだけ本記事で扱ったCSSコードを適用するとスムーズにレスポンシブコーディングができるかと思います。
以上で解説をおわります。
目次