【コピペ】スマホで横長の表(table)を横スクロールさせる簡単CSS指定

tableレイアウトでサイトに「表」を入れたけど、横の項目が多くて、スマホで見た時にはみ出してしまう・・・。

そんな時の解決策としては、
1.表を画像にして表示する(変則的な表の場合は意外と有効な手段)
2.項目を減らす。(項目を減らせない場合が多いので無理?)
3.はみ出した部分はスクロールさせる。

などがあると思いますが、今回はおすすめの3番の方法を解説したいと思います。


HTML

<div class="scrollbar">
<table>
</table>
</div>

CSS

div.scrollbar {
overflow: auto; /*画面外になったときの扱いをautoに*/
white-space: nowrap; /*セル内の文字の折り返しを禁止*/
}
div.scroll::-webkit-scrollbar {
height: 7px; /*スクロールバーの高さを指定*/
}
div.scroll::-webkit-scrollbar-track {
background: #e5e5e5; /*スクロールバーじゃない部分のカラー*/
}
div.scroll::-webkit-scrollbar-thumb {
background: #b3b3b3; /*スクロールバーの部分のカラー*/
}

まとめ

横に長すぎる表をサイトで表示する場合、スマホ等の横幅の小さい端末で閲覧する場合を考慮すると、スクロールバーの実装はとても有効な解決方法ですね。

以上になります。