※ご注意：本記事は2015年に執筆した記事をもとに、現在の状況に合わせて内容を修正・追記しています。
（2026年6月更新）
こんにちわ（ひ）です。
レスポンシブデザインを考える時に頭を悩ませる要素のひとつとして、表組（テーブル）の見せ方があります。シンプルな表組（テーブル）の場合は問題ないのですが、内容が盛りだくさんの表組（テーブル）をPCとスマホで同じ内容を表示しなければならない時、とても悩みます。
特に列が多い横長の表組（テーブル）の場合、PC画面だと見やすいのですが、スマホだと非常に見づらくなってしまいます。
スマホで表を見やすくするには、表の内容に応じて見せ方を選ぶ必要があります。
この記事では、もっとも基本的な横スクロール対応を中心に、注意点なども含めてご紹介します。
スマホではテーブルに横スクロールバーを表示して見やすくする
色々な方法があると思いますが今回ご紹介する方法は、スマホ画面用にテーブルを狭くするのではなく、スマホ画面からはみ出す場合は、スクロールバーで横スクロールさせるという方法です。
この方法で、狭いスマホ画面でも「文字が改行だらけで見づらくなる」という問題が解決できると思います。
テーブルに横スクロールバーを表示する方法
方法は簡単！テーブルをdivタグなどで囲み、その要素に対して overflow-x: auto; を指定します。
（例１）
HTMLの例
<div class="table-scroll">
<table>
<tr>
<th>項目</th>
<th>項目</th>
<th>項目</th>
<th>項目</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</div>
CSSの例
.table-scroll {
overflow-x: auto;
}
必要に応じて、テーブル側に最小幅を指定しておくと、スマートフォンで列幅が狭くなりすぎるのを防げます。
.table-scroll table{
min-width: 640px;
}
スクロールバーの見た目を調整する
スクロールバーは以下のようにCSSでデザインに合わせて見た目を調整することができます。
※スクロールバーの表示方法はブラウザやOS、ユーザーの設定によって変わります。
※ -webkit- や ::-webkit-scrollbar は、もともとWebKit系ブラウザ向けの独自拡張として使われてきた指定です。
現在でもChromeやSafariなどで使える場合がありますが、標準的なCSSとしてすべてのブラウザで同じように使えるものではありません。
（例2）
.table-scroll {
width: 100%;
overflow-x: auto;
}
.table-scroll::-webkit-scrollbar {
height: 5px;
}
.table-scroll::-webkit-scrollbar-track {
border-radius: 5px;
background: #eee;
}
.table-scroll::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #666;
}
スクロールバーのデザインはこのように調整することができますが、環境によっては意図した通りに表示されない場合もあります。
なので、横スクロールできることを確実に伝えたい場合には、スクロールバーの装飾に加え、「※表はスクロールできます。」などの補助テキストも併せて書いておくとよりユーザーに優しい設計になるかと思います。
表組（テーブル）の内容によって適した見せ方を選ぶことがとても大切です。
是非参考にしてみてください。
