レスポンシブデザインで設計する際、PCとスマートフォンではディスプレイサイズが大きく異なり、表組（テーブル）をどう表現するかはユーザビリティに少なからず影響します。

項目の少ないテーブルでは問題ないのですが、ボリューム満点のテーブルの場合、PCでは無理なく表示できてもスマートフォンだと収まりきれない。収まってもそのままでは、読みづらく実用に耐えないことも多々あります。

そういった際の対策として、以下の様なものがあります。

1. ① overflowを指定して、テーブルの横（水平）スクロールを実現する
2. ② tableの関連要素をblock要素に変換して、セルを縦に並べる
3. ③ スマートフォンのみ、優先度の低い項目（セル）を非表示にする

ただし上記で挙げた対策は、どれも一長一短あり、この方法がベストだと断言することができません（人によって意見が分かれるところだと思います。）

先ほど、レスポンシブデザインのテーブルの表現方法として、どれも一長一短があるとお伝えしましたが、「デスクトップファーストで構築したい！」とか「PCと同じ見た目でテーブルを表現したい！」というような要望があれば、前述の『① overflowを指定して、テーブルの横（水平）スクロールを実現する』をオススメします。
この方法であれば、PCとスマートフォンで大きく記述を書き換える必要がないからです。

ただ、テーブルの横（水平）スクロールで表現する方法は、「使い方がわかりにくい。」「横スクロール出来ることに気づきにくい。」といったデメリットが考えられるので安易に導入したくないというのが本音でした。

これからは、JavaScriptライブラリ「ScrollHint」を使うことで、使いやすく横スクロールにも気づきやすいテーブルが実現できます。

「ScrollHint」を導入したページでは、横スクロールを設定した要素上にスクロール動作を模したアイコンが表示されるので、使い慣れてない人でも操作方法が伝わりやすくなります。
また、スクロール後はアイコンが消えるのでコンテンツの邪魔にもなりません。
もちろん、スマートフォンでも問題なく表示されました。

詳しい実装方法・ダウンロードは、下記リンクをご確認ください。

ScrollHint