フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【テクニック】スマホでtableタグを縦並びにする方法

display:block
table
td
th
スマホ
レスポンシブ
縦並び

tableタグはWebサイトで表を作るための専用タグです。
そしてこのタグはtrで囲われたthtdはどれだけ横幅があったとしても横並びに配置されます。
これがtableタグの特性ですが、スマホで表示した時に全部が横並びだと見づらくなってしまうことがよくありますね。
そんな時にスマホ用に別タグで管理する方法をとったりする人もいるのではないでしょうか。
実はtableタグのthtdもCSSを指定するだけで縦並びに切り替えることが出来るんです。
この記事では、tableタグのthtdを縦並びにする方法をご紹介したいと思います。

スマホでtableタグを縦並びにする

tableタグを構成するthtddisplay:table-cellが指定されています。
この指定があるとそのタグはどれだけ横幅があったとしてもカラム落ちすること無く、横並びになってしまいます。

そこでthtdに以下の指定を追加することで縦並びにすることが出来ます。

@media screen and (max-width:768px) , print{
    th,
    td {
        display: block;
    }
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ブレイクポイントでtableタグが縦並びに切り替わりましたね。

ポイントはthtdに指定することです。tabletrに指定しても縦並びになることはありません。

まとめ

いかがでしたか?
tableタグに限らずタグにはデフォルトで値が設定されています。
これらの値を変更することでレイアウトを自在にコントロールすることが出来るようになります。
是非参考にしてみて下さい。