もう悩まない。CSSでレスポンシブなtableデザイン&コーディング

2018/07/17


もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。
PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。

demo

Contents

  1. 縦に積むテーブルレスポンシブ
  2. 横並びを縦並びにするテーブルレスポンシブ
  3. 疑似要素で見出しを用意するテーブルレスポンシブ
  4. content:attr() で見出しを表現するテーブルレスポンシブ
  5. spanで見出しを表現するテーブルレスポンシブ
  6. スクロールで表示させるテーブルレスポンシブ

縦に積むテーブルレスポンシブ

PC

SP

ごくごく一般的なテーブルパターンですね。
ソース上は上から順番に要素が並んでいるので、それらをblock要素に指定して横幅100%等にすれば
簡単に縦積みのSPに適したレイアウトにすることができます。

2列のみだと以下のように会社概要などに使われている構成です。
内容が余程長かったり見づらくならない限り、そのまま横幅を縮める形でも問題ないでしょう。

HTML

CSS

横並びを縦並びにするテーブルレスポンシブ

PC

SP

料金表、成分表など…横に長く並ぶ表示のテーブルで、縦にしても問題ないような場合はスマホでは縦並びにすることで解決できます。
ただ、この方法は高さ指定をする必要があり、テキスト量の差がある場合などは少し手間がかかるかもしれません。

trをtheadとtbody以下に格納してfloatで横並びにして、中身はblockにすることで縦並びにしています。

HTML

CSS

疑似要素で見出しを用意するテーブルレスポンシブ

PC

SP

こちらも横長だけれど内容が長いなどで縦積みのレイアウトにしたい場合のtableで使えるパターンです。
thを全部スマホでは非表示にして消してしまい、各trの一番初めのtd要素に:before疑似要素でthを偽装します。
border分が疑似要素の横幅100%と合わなかったりするようなので少々力業です。
borderを使用しないデザインであれば問題なく実装できそうです。

HTML

CSS

content:attr() で見出しを表現するテーブルレスポンシブ

PC

SP

縦にも横にも結構重要な見出し系が設定されているtableをレスポンシブするパターンです。
スマホの際にはPCで表示されていた見出し部分を非表示にし、縦に積まれていた見出しを一番上に。
そして非表示にした要素はtdに仕込んでいたdata-labelをcontentプロパティで呼び出して表示します。
表の内容によっては意味合いを崩さないレイアウトにできるかどうか判断する必要がありますが
結構使えるのではないかと思います!

content:attr() は他のことでも使用できそうです。
参考:【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する

HTML

CSS

spanで見出しを表現するテーブルレスポンシブ

PC

SP

これは旅行会社系のテーブルのコーディングの際に数回使用したことがあり、
見出し部分が「料金」「日付」~になるようなイメージです。

こちらもCで表示されている見出しを非表示にしてしまうところまでは同様で、
逆にtdにspanタグで入れておいた見出しのテキストをSPの時に表示することで
tableの内容を保った形でレスポンシブを実現する方法です。

HTML

CSS

スクロールで表示させるテーブルレスポンシブ

SP

最後は、どうしても横長のままが見やすい!
というときにスマホはスクロールで見せる方法です。

今までの方法で見やすくするのもよいのですが、あまりに縦に長くなる場合や
レスポンシブさせることにこだわりすぎることもあるので
純粋にスクロールさせたほうが良いパターンも想定に入れておきましょう。

HTML

CSS

+α tableのセルの間の余白をつける


tableでセル間にmarginをあけることもできます。
が、セルの【左右】【上下】のセットでの指定のみが可能です。
上下左右別々のmarginを指定することはできないのでデザインの際は要注意ですね。

HTML

CSS

以上、すべてのパターンをまとめたデモページは以下よりご覧頂けます。
demo

なんでも縦に直せばOKというわけではないテーブルのレスポンシブ対応。
よーくテーブルの内容を理解して、どのようなレイアウトが良いか判断できるとよいですね。

■参考記事
CSSだけでレスポンシブ対応のtableを実装してみた
CSSで出来るレスポンシブ対応を考えた table レイアウト