【CSS】HTMLのテーブルを縦にする方法

  • 2021年5月7日
  • 2023年5月10日
  • css
css

HTMLのtable要素を縦にするテクニックです。tableを縦にするのはスマホ対応の時に多いです。
「PC表示は横表示だけど、スマホは縦にしたい」といった場合ですね。

意外にも簡単に出来るので、やり方を覚えておきましょう。

HTMLのテーブルを縦にする方法!

まず、適当なテーブルを作成します。

ちなみに表示はこんな感じになります。
(コードは厳密には違いますが、気にしないでください)

テスト1 内容1 テスト2 内容2
テスト3 内容3 テスト4 内容4

PCではよくある構成ですね。ただ、スマホだとちょっと横に幅を取りすぎています。
そんな時は、CSSに以下を指定してみましょう。

これを指定すると、テーブルは下記のような感じになります。

テスト1 内容1 テスト2 内容2
テスト3 内容3 テスト4 内容4

表組が一気に縦になりましたね。デザインは修正する必要がありますが、枠組みそのものは問題なさそうです。
このようにCSSに少し記述するだけで、HTMLのテーブルを縦組みへと変えることができました。