【テクニック】スマホでtableタグを縦並びにする方法
display:block
table
td
th
スマホ
レスポンシブ
縦並び
tableタグはWebサイトで表を作るための専用タグです。
そしてこのタグはtrで囲われたthやtdはどれだけ横幅があったとしても横並びに配置されます。
これがtableタグの特性ですが、スマホで表示した時に全部が横並びだと見づらくなってしまうことがよくありますね。
そんな時にスマホ用に別タグで管理する方法をとったりする人もいるのではないでしょうか。
実はtableタグのthやtdもCSSを指定するだけで縦並びに切り替えることが出来るんです。
この記事では、tableタグのthやtdを縦並びにする方法をご紹介したいと思います。
この記事の目次を表示
スマホでtableタグを縦並びにする
tableタグを構成するthやtdはdisplay:table-cellが指定されています。
この指定があるとそのタグはどれだけ横幅があったとしてもカラム落ちすること無く、横並びになってしまいます。
そこでthやtdに以下の指定を追加することで縦並びにすることが出来ます。
@media screen and (max-width:768px) , print{
th,
td {
display: block;
}
}実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
ブレイクポイントでtableタグが縦並びに切り替わりましたね。
ポイントはthやtdに指定することです。tableやtrに指定しても縦並びになることはありません。
まとめ
いかがでしたか？tableタグに限らずタグにはデフォルトで値が設定されています。
これらの値を変更することでレイアウトを自在にコントロールすることが出来るようになります。
是非参考にしてみて下さい。
