レスポンシブデザイン対応のテーブル

PCでは幅広く見せたい表組みですが、スマートフォンで見ると幅が狭いので見にくいですよね。
そこで、以前Web Designingに載っていた、レスポンシブ対応の方法を簡単にメモしておきます。

  1. PCで表示すると…
  2. スマートフォンで表示すると…
  3. CSSで表示を切り替える
  4. 完成したものをスマートフォンで見ると!

1.PCで表示すると…

pchyou

簡単に表を作成しました。わたしの好き嫌いの表ですが、、PCで見るととっても見やすい表になっていますo(^▽^)o


2.スマートフォンで表示すると…

sphyou

まあ、こんなかんじになりますよね。十分見えるけれどもっと長い文章だと見にくいです><


3.CSSで表示を切り替える

そこで下記のようにデバイス幅に応じてCSSを切り替えます。

.table-style01{
	margin:15px 0;
	border-top:1px solid #ddd;
	border-right:1px solid #ddd;
}
.table-style01 th, .table-style01 td{
	padding:15px;
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
}
.table-style01 th {
	background-color:#f4f4f4;
}
@media screen and (max-width:640px) {
	.table-style01 th, .table-style01 td{
		display:block;
	}
}

ただdisplay:block;にしてるだけですけどね。


4.完成したものをスマートフォンで見ると!

smart

スマートフォンで見るとこうなってるわけです。ほら、さっきより見やすい!


この方法を初めて見た時は、感動したのですが、いざ記事にして書いてみるとそうでもない気がしてきました。
とりあえずメモということで!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です