とにかく最速で横スクロールバーを出したい！
スマホのテーブルに横スクロールバーを出したかったのですが探し方が悪かったのか、
検索しても横スクロールバーと関係ない装飾が混ざってるものが多く
すぐに自分のサイトに反映させることが難しかったです。
それならばと 一番単純なサンプル を作ってみました。
とにかく爆速で スマホのテーブルに横スクロールバーを出せます。
横スクロールバーの出し方
ページ内に下記のように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>
/** 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>
<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>
/** 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>
これなら 秒速で楽勝 ですね！
