●レスポンシブ対応とtableのスクロール機能の組み合わせ

利点

①横スクロールがある表（table）はレスポンシブ対応強制的に画面内に表示される事がなくなるのでスマートフォンでも見やすくなる。

②パソコンやタブレットでの表示の場合は、表の全体がすぐに見られるレスポンシブ対応のほうが横スクロールよりも見やすい印象。

<table width="100%">

下記にてブラウザの幅に応じてレスポンシブにするか横スクロールさせるかを組み合わせてみます。

CSS

@media (max-width: 480px) {
 .sp-scroll-table table{
   border-collapse: collapse;
   margin: 2em 0;
   max-width: 100%;
 }

 .sp-scroll-table th{
   background-color: #009BBF ;
　text-align: center;
　color: #FFFFFF ;
   padding: 1em;
 }

 .sp-scroll-table td{
   border: solid 1px #ccc ;
   padding: 1em;
   white-space: nowrap;
 }

 .sp-scroll-table {
   overflow-x: auto;
   margin-bottom: 1em;
   max-width: 770px;
 }
}

<div class="sp-scroll-table"></div>でスクロールさせたいtable（表）を囲んであげる。

html

<h1>aaaaaaaaa</h1>

<div class="sp-scroll-table">

<table>
<thead>
<tr>
<th width="20%">aaaaa</th>
<th width="10%">aaaaa</th>
<th width="10%">aaaaa</th>
<th width="30%">aaaaa</th>
<th width="30%">aaaaa</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

</div>