コーディング

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

2016.06.23

2017.05.24

ムーディーなステーキハウス

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

概要ページや情報のまとめをページに載せる際、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を実装し、ユーザーフレンドリーなページになるよう工夫してみましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。