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

  • 2021年5月7日
  • 2021年5月7日
  • 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のテーブルを縦組みへと変えることができました。