【コピペでOK】CSSでレスポンシブなtableを作る簡単な方法!

2021.07.16

CATEGORY : WEB

こんにちは缶コーラです。

以前、仕事でテーブルデザインをレスポンシブで表示する際に結構悩みましたので、同じような悩みを持つ方が多いと思いますので何パターンか王道レスポンシブテーブルデザインを紹介します。

この記事の目次

縦に積んでいくデザイン


一番一般的なテーブルデザインです。
テーブルの列数を1列にして1行ずつ表示させるデザインです。
テーブルの内部要素のをblock要素に指定して、width(横幅)を100%に指定することで簡単に縦積みのテーブルを作ることができます。
この方法ですと、セルが多いテーブルだと行数が増えるのでものすごく縦長のページになってしますこともありますので注意してください。

See the Pen
by テラソリューション/テラソル (@terasolution)
on CodePen.


※下部の0.5xや0.25xを押して比率を変えるとPC表示とスマホ表示を切り替えれます

見出し行があるデザイン


見出し行があるデザインの場合は、スマホ表示時に見出し行をdisplay:none;で非表示にして、見出しになりうる列を見出しとして表示する方法があります。
こちらもtdにdisplay:block;とwidth:100%;を入れて1行表示にするところまでは、先ほどのデザインと同様です。
さらに見出しにするtdを非表示にしthと同様のスタイルをあてるだけで実現できます。

See the Pen
tabe02
by テラソリューション/テラソル (@terasolution)
on CodePen.

やっぱり見出しを表示したい場合


先程のデザインではスマホ表示の際に見出し行を非表示にして、【名前】列を見出しとして利用しましたが、表の内容によってはそれでは何の項目なのか分かりづらいものもあります。
その場合はtddata-labelを設定し、contentプロパティで呼び出して表示することでわかりやすい表を作ることができます。

See the Pen
table03
by テラソリューション/テラソル (@terasolution)
on CodePen.

見出し列のような表示にしたい場合


先程のデザインの疑似要素に対してスタイルをあてることで見出し列のような表示にすることもできます。

See the Pen
table04
by テラソリューション/テラソル (@terasolution)
on CodePen.

スクロールで表示させるデザイン


最後はPC表示用のテーブルのままの方が見やすい!または縦積みデザインにすると縦長で見づらい!などの場合は割り切ってそのままのデザインでスクロールで表示させちゃいましょう。
このデザインの場合はユーザがスクロールの操作をしないとテーブル全体を見ることができませんので、テーブルの付近に横スクロールを連想させるアイコンや画像、またはテキストで「横スクロールしてください」などのユーザが分かりやすいアナウンスをすることが必要でしょう。

See the Pen
table05
by テラソリューション/テラソル (@terasolution)
on CodePen.

まとめ

いかがでしたか、テーブルのデザインはここに書いただけではなくもっと様々な状況に応じて対応していく必要があります。
レスポンシブ対応で、ただ縦にすれば見やすいテーブルになるわけではありません。せっかくレスポンシブ対応しているのに必要な情報が見づらいとユーザが感じてしまうと、離脱率も高くなることもありますので、ユーザ視点で見やすいテーブルデザインを考えて作るようにしましょう。
初心者の方がハマりそうなポイントはこの記事に載っていると思いますので参考になれば幸いです。

へばっ!!

Pocket