スマホでテーブルをスクロールバーで横スクロールさせる方法（最速版）

2023/1/3 デザイン

とにかく最速で横スクロールバーを出したい！

スマホのテーブルに横スクロールバーを出したかったのですが
探し方が悪かったのか、
検索しても横スクロールバーと関係ない装飾が混ざってるものが多く
すぐに自分のサイトに反映させることが難しかったです。

それならばと一番単純なサンプルを作ってみました。

とにかく爆速でスマホのテーブルに横スクロールバーを出せます。

横スクロールバーの出し方

ページ内に下記のようにstyleタグを追加して

<style>
/** SPは横スクロールバー表示 */
div.scroll-area {
width: 100%;
overflow-x: scroll;
}
/** PCは横スクロールバー表示しない */
@media screen and (min-width: 1025px) {
div.scroll-area { overflow-x: auto; }
}
</style>

下記のようにtableタグにscroll-tableクラスを追加してdivタグで囲うだけでOK！

<div class="scroll-area">
<table class="scroll-table">
～
</table>
</div>

実際のデモはこちら↓（スマホで見ると横スクロールバーが表示されます）

順	都道府県	2020年 (令和2年)	2015年 (平成27年)	2010年 (平成22年)	2005年 (平成17年)	1995年 (平成7年)
1	東京都	14,047,594	13,515,271	13,159,388	12,576,601	11,773,605
2	神奈川県	9,237,337	9,126,214	9,048,331	8,791,597	8,245,900

実際のソースはこちら↓

<style>
/** SPは横スクロールバー表示 */
div.scroll-area {
width: 100%;
overflow-x: scroll;
}
/** PCは横スクロールバー表示しない */
@media screen and (min-width: 1025px) {
div.scroll-area { overflow-x: auto; }
}
</style>
<style>
/** ここは装飾用なので横スクロールバー表示には不要 */
th, td { font-size: 12pt; }
th { white-space: nowrap; }
table.scroll-table { width: 100%; }
.num { text-align: right; }
</style>
<div class="scroll-area">
<table class="scroll-table">
<thead>
<tr>
<th>順</th>
<th>都道府県</th>
<th>2020年<br>(令和2年)</th>
<th>2015年<br>(平成27年)</th>
<th>2010年<br>(平成22年)</th>
<th>2005年<br>(平成17年)</th>
<th>1995年<br>(平成7年)</th>
</tr>
</thead>
<tbody>
<tr>
<th class="num">1</th>
<td class="pref">東京都</td>
<td class="num">14,047,594</td>
<td class="num">13,515,271</td>
<td class="num">13,159,388</td>
<td class="num">12,576,601</td>
<td class="num">11,773,605</td>
</tr>
<tr>
<th class="num">2</th>
<td class="pref">神奈川県</td>
<td class="num">9,237,337</td>
<td class="num">9,126,214</td>
<td class="num">9,048,331</td>
<td class="num">8,791,597</td>
<td class="num">8,245,900</td>
</tr>
</tbody>
</table>
</div>

これなら秒速で楽勝ですね！