レスポンシブサイトでテーブルがはみ出てしまう場合にCSSでテーブル部分だけ横スクロールさせる方法

レスポンシブ対応のサイトを制作していると、テーブルの扱いに悩まされることが多いです。PCで見た時は問題なくても、スマホで見ると以下のように縦に伸びてしまい、非常に見難くなってしまったという経験はないでしょうか。

これを解決するために、CSSを使ってテーブル部分のみを横スクロールさせる方法をご紹介したいと思います。

動きについては、デモページを用意しましたので、ご確認いただければと思います。

デモページを見る

ブラウザの幅を縮めると、横スクロールが出現します。

レスポンシブサイトでテーブルがはみ出てしまう場合に、CSSでテーブル部分だけ横スクロールさせる方法

まずは、テーブルをtable-scrollというクラスで内包します。

<div class="table-scroll">
<table>
 <tr>
 <th>項目1</th>
 <th>項目2</th>
 <th>項目3</th>
 <th>項目4</th>
 <th>項目5</th>
 <th>項目6</th>
 <th>項目7</th>
 <th>項目8</th>
 <th>項目9</th>
 <th>項目10</th>
 </tr>
 <tr>
 <td>内容1内容1</td>
 <td>内容2内容2</td>
 <td>内容3内容3</td>
 <td>内容4内容4</td>
 <td>内容5内容5</td>
 <td>内容6内容6</td>
 <td>内容7内容7</td>
 <td>内容8内容8</td>
 <td>内容9内容9</td>
 <td>内容10内容10</td>
 </tr>
</table>
</div>

CSS側は以下のように指定しましょう。

.table-scroll {
 width: 100%;
 overflow-y: hidden;
 overflow-x: auto;
 -ms-overflow-style: -ms-autohiding-scrollbar;
 -webkit-overflow-scrolling: touch;
}

table{
 border-collapse: collapse;
}

th,td{
 border: solid 1px #ccc;
 padding: 8px;
 white-space: nowrap;
}

th{
 background: #aaa;
 color: #fff;
}

テーブル内のテキストが折り返さないように「white-space: nowrap;」を指定し、テーブル全体に「-webkit-overflow-scrolling」を指定することでスクロールを実現しています。

スクロール可能であることを示すために、常にスクロールバーを表示しておきたい場合は、以下のCSSも追加します。

.table-scroll::-webkit-scrollbar {
 height: 8px; /* スクロールバーの高さ */
}

.table-scroll::-webkit-scrollbar-thumb {
 background: #aaa; /* スクロールバーの色 */
}

.table-scroll::-webkit-scrollbar-track {
 background: #ccc; /* スクロールバーの背景色 */
}

iOSでスクロールバーが表示されない場合は、.table-scrollに指定されている「-webkit-overflow-scrolling: touch;」を削除すると表示されるようになります。iOSでは”惰性スクロール”と”常時スクロールバー表示”が両立できない様です。

あとがき

CSSのみの調整なので、手軽に対策できますね。横スクロールで対処するという方法もあるということで、スマホサイトでのテーブルの扱いに困ったらぜひ参考にしてください。