レスポンシブに！スマホ表示はテーブルを縦並びにするCSS

Web サイトにテーブル（表）を入れている場合、パソコンの画面では綺麗に表示されていてもスマホで閲覧した時に崩れてしまうことってありますよね。テーブルを綺麗に表示させる方法の一つとしてあるのが、以前にご紹介したテーブルがはみ出さないようにCSSで横スクロールさせる方法です。

テーブルが複雑であったり、列数が多い（横に長い）場合には横スクロールさせる方法が有効だと思います。しかしお問い合わせフォームのような、列数が２～３つしかないようなシンプルなテーブルであれば、わざわざ横スクロールさせる必要はありません。

シンプルなテーブルをスマホ画面でも綺麗に表示させる方法としてあるのが、テーブル内の枠（td や th）を縦並びにする方法です。

CSS だけでテーブルを縦並びにする

スマホ表示など画面の幅が狭くなった時にテーブルを縦並びにするのは、次の CSS のコードをモバイル表示で使用する CSS 内に追加するだけで可能です！レスポンシブサイトなどに便利に使うことができます。

table {
  border-collapse: collapse;
}
table td, table th {
  width: 100%;
  padding: 8px;
  display: block;
}
table th {
  background-color: #eee;
}

上記のコードを CSS に追加するだけだと、全てのテーブルに適用されてしまいます。

もし指定したテーブルのみ適用させたいのであれば table タグを
<div class=”res_table”> ～ </div>
で囲んで、CSS は下記のものにしてください。

.res_table table {
  border-collapse: collapse;
}
.res_table table td, .res_table table th {
  width: 100%;
  padding: 8px;
  display: block;
}
.res_table table th {
  background-color: #eee;
}

本当に簡単にテーブルを縦並びにしてしまうことが可能です。綺麗にテーブルが表示されずに困っている方はぜひ使用してみてください。