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

レスポンシブに!スマホ表示はテーブルを縦並びにするCSS
(YouTube, AdSense, Play 公認エキスパート)
2021年03月22日 in Web・IT
記事内にPR・広告が含まれる場合があります

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

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

シンプルなテーブルをスマホ画面でも綺麗に表示させる方法としてあるのが、テーブル内の枠(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;
}

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

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。