見やすくするための一工夫！レスポンシブでのtableの扱い

項目の多いテーブルをスマホで見ると・・・

概要ページや情報のまとめをページに載せる際、tableでの表組みは大変便利です。ですがスマホの画面でtableを見ると文字量によって見づらかったり表示崩れのようになってしまったりすることがあります。
こういったときにtableを見やすく表示するためには、cssを利用して少し工夫を施してやる必要があります。

今回はそんなレスポンシブでのtableの表示方法についていくつかご紹介させていただきます。

2列のテーブルを縦に並べ替える

See the Pen aZBwdd by hoshu_t (@hoshu_t) on CodePen.

2列のテーブルであればth、tdにdisplay:blockをかけることで、要素を縦に並べ替えることができます。
手軽に行える反面、2列のテーブル限定であることや、項目の数が多いテーブルだとテーブルが長くなってしまうというデメリットもあります。

テーブル全体をスクロールバーで

See the Pen vKyevy by hoshu_t (@hoshu_t) on CodePen.

多段や大きなテーブルの見た目はそのままに、スクロールを使ってテーブル全体を見られるようにしています。
外側にdivを一つ増やすだけで導入できるので、実装が簡単で使いやすいです。

positionを利用してヘッダーを固定

See the Pen gMLGyx by hoshu_t (@hoshu_t) on CodePen.

positionでthを固定し、要素部分にスクロールを実装することで、テーブルの項目が何を表しているのかを確認したまま全体を見せることができる方法です。
thが一行目に横たわっているtableでも、display:blockをつかって要素の縦横を入れ替えることで、上記サンプルのような見た目を実現できます。

若干導入が複雑なのがややデメリットです。

用途やtableのサイズに合わせた良い方法で表示することで、スマホでも視認性の高いtableを実装し、ユーザーフレンドリーなページになるよう工夫してみましょう。