【コピペ】スマホで横長の表（table）を横スクロールさせる簡単CSS指定
tableレイアウトでサイトに「表」を入れたけど、横の項目が多くて、スマホで見た時にはみ出してしまう・・・。
そんな時の解決策としては、
１．表を画像にして表示する（変則的な表の場合は意外と有効な手段）
２．項目を減らす。（項目を減らせない場合が多いので無理？）
３．はみ出した部分はスクロールさせる。
などがあると思いますが、今回はおすすめの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; /*スクロールバーの部分のカラー*/
}
まとめ
横に長すぎる表をサイトで表示する場合、スマホ等の横幅の小さい端末で閲覧する場合を考慮すると、スクロールバーの実装はとても有効な解決方法ですね。
以上になります。
