table のレイアウトを PC とモバイルで見た目を自動的に変更する

About CSS

セルが2つ並びの table レイアウトは、PC で見た時には横並びのほうが見やすいですが、モバイル表示をした場合、横並びにすると、ひとつひとつのセルが詰まってしまって、大変見づらくなってしまいます。

モバイルでみた tabele はセルが詰まって見づらい

セルが詰まって見づらい table

しかし、セルが縦並びになればどうでしょう?

セルを縦並びにした見やすい table

セルが縦並びの見やすい table

このようにひとつひとつのセルが大変見やすくなります。

今回は「table セルのレイアウトを PC では横並び、モバイルでは縦並びになるように見た目を自動的に変更する方法」を紹介します。

これは CSS だけで簡単に設定できます。

table セルのレイアウトを PC とモバイルで変更する手順

メディアクエリに簡単な CSS を施すだけ

table セルのレイアウトを PC とモバイルで変更する方法はとても簡単です。

このメディアクエリは「640px まではこの CSS レイアウトを優先的に使用してね~」という記述をしいます。

このメディアクエリの間に、

を入れるだけで table セルのレイアウトが PC とモバイルで違ったものになります。

以下、ちゃんと記述した CSS を掲載します。

table セルのレイアウトを PC とモバイルで変更する CSS

こんな感じで、th と td のスタイルに「display: block;」を追加するだけで、モバイルで見た時には縦並びになるように設定できます。

デモを用意しました

table レイアウトのデモ

table セルのレイアウトを PC とモバイルで変更しているデモを用意しました。

table セルのレイアウト PC 番だと以下のように横並び。

table レイアウト PC 版

table レイアウト PC 版

モバイル版だと、以下のように縦並びに切り替わります。

table レイアウトモバイル 版

table レイアウトモバイル 版

以下のリンクボタンからデモが閲覧できます。

デモの HTML と CSS コードは以下

HTML コード

 

CSS コード

あとがき

table セルのレイアウトは、メディアクエリに display: block; を追加するだけで、簡単に PC とモバイルの表示を切り替えることができます。

この手順は、セルの並びが多くなっても全然問題ないので重宝すると思います。