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

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

PCで表示すると…

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

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

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

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;にしてるだけですけどね。

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

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

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