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

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

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

html

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

CSS

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

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

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

まとめ

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

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

超!関連記事!

2015年5月8日更新
[CSS、スマホ、table]スマホの画面だと見づらいtableをMedia Queriesで見やすくしたら良いと思うよ!今度はスクロールだよ!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク