【テクニック】スマホで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
タグに限らずタグにはデフォルトで値が設定されています。
これらの値を変更することでレイアウトを自在にコントロールすることが出来るようになります。
是非参考にしてみて下さい。