会社概要、料金表、求人の募集要項などでtableを使う機会は多いと思います。
tableを作ったら必ずチェックしたいのが、スマホでの表示です。
複雑な表ほどスマホで見た時に表示が崩れてしまいがちです・・・。


そこで今回はtableをレスポンシブ対応させる方法をいくつかまとめてみました。
（他にいい方法をご存知でしたらぜひ追記お願いします！）

ケース1：2列の表

会社概要などでよく使うスタンダードな表です。
これをそのままスマホで見ると、↓このように表示されます。





この例の場合は読めなくもないですが、少し窮屈に見えますよね。
もし長い文章があった場合、さらに見づらくなってしまいます。


これを改善する方法はとっても改善です。
thとtdタグをそれぞれブロック要素にして、横幅いっぱいに表示させるだけです。

すると、このようにすっきり見やすい表になります。

ケース2：3列の表

料金表などでこのような表を作る機会も多いと思います。
が、列が増えれば増えるほど、スマホで見た時に残念なことになってしまいます・・・。





ぎゅうぎゅう詰めで見栄えがよろしくないですよね。
これも、ケース1と同じコードを使うことで改善します。





さらにこの表のように項目が増えてきた場合、以下のように一工夫するだけでデザイン性も可読性も良くなるので、ぜひ試してみて下さい。
・thを太字にする
・thの色を変える
・thに背景色を入れる
・border-bottomを活用する
・paddingやmarginにメリハリをつける

ケース3：複雑な表

このように上にも左にも見出しがある複雑な表の場合、こうなります↓





見るだけで「うぐっ・・・(´·ω·`)」と目を背けたくなりますね。
このようなケースの場合、想像できるかと思いますが、ケース１やケース２で使った方法が通用しません。よく分からない表になってしまいます。
さらにcolspanやrowspanを多用している表の場合、レスポンシブ対応させるのがなかなかに大変です。
どうすればモバイル対応できるか考えることに頭を使うぐらいなら、↓このようにさっさとスマホ用の新しい表を作ってしまう方が手っ取り早いと思います。





ただしこれだとPC用の表とスマホ用の表が2つ並んでしまうことになるので、クラス名をつけて表示・非表示を切り替えましょう。
例えばPC用の表に”table-pc”、スマホ用の表に”table-sp”というクラス名をつけたとしたら、以下のように記述すると表示を切り替えられます。とっても簡単です。

※画像を作ればいいのでは？

これも非常に良い案だとは思うのですが、以下の2つの短所があります。

(1)メンテナンスの上でリスクがある
過去に画像で作られた表の修正依頼が来た時、制作した人がpsdデータを保存していなかったために結局1から作り直しということがありました。
(2)SEOでコーディングに劣る
表の中に会社名や地名、検索に引っかかりそうなキーワードが含まれていた場合、もちろんコードで書いた方がSEO効果は高いです。
なので極力コードで作るべきだと思います。


ただかなり複雑な表やデザイン性の高い表の場合、画像で作った方が良いケースもあるかと思います。
その場合は必ずpsdやaiデータを共有サーバーに取っておくことを忘れないようにしましょう。

以上、tableをレスポンシブ対応させる方法についていくつかまとめてみました。