[CSS]スマホの画面だと見づらいtableをMedia Queriesで見やすくしたら良いと思うよ！

tableってスマホの小さい画面だと見づらいですね！ですね！
そんなときはMedia Queriesでガラッと見た目を変えちゃいましょう！

と言うわけで1つのページをPC用、スマホ用とテンプレ変更して表示したりレスポンシブなページで使えそうなテーブル用CSSです。
ますはデモ。(ブラウザのサイズ(横幅)をグイ～ンで小さくしてみてください。)

html
CSS
1. まとめ
超！関連記事！

html

htmlは適当にテーブルを作っておこう！

CSS

table {
	width:80%;
	border-collapse:collapse;
	margin:50px auto;
}
th {
	border:1px solid #ccc;
	background:#e1e1e1;
	padding:5px;
}
td {
	border:1px solid #ccc;
	padding:5px;
}
@media only screen and (max-width:420px) {
	thead {
		display:none;
	}
	tbody tr{
		display:block;
		margin-bottom:2em;
	}
	tbody th, tbody td{
		display:list-item;
		border:none;
	}
	tbody th {
		color:#f36;
		text-align:left;
		background:#fff;
	}
	tbody td {
		margin-left:1em;
	}
}

@mediaより前がPC用(ブラウザ横幅421px以上)のCSSで@media以降がスマホ用(ブラウザ横幅420px以下)です。

tbody th, tbody td{
	display:list-item;
	border:none;
}

↑でthとtdをリスト表示変更しています。
もちろんlist-style-typeも使えますので見た目の広がりも増えますね！

これで小さい画面では見づらいテーブルもリスト表示で見やすくなりますね。

まとめ

毎回ネックになるIEですがスマホ対応と考えれば気にすることじゃないかなという感じでしょうか。

以前はスマホ用サイトは見づらくなるからテーブル使わないほうがいいかな・・・と思ってましたが、これで気にすることなくテーブル使えるんじゃないかと。
(参考サイト：http://css-tricks.com/responsive-data-tables/)

html

CSS

まとめ

超！関連記事！