【CSS】テーブルを横スクーロールさせる方法／スマホ・レスポンシブ対応

CSS

2022.02.172021.08.21

[no_toc]
スマホ使用時等、表（テーブル）を横にスクロールしたい場合のHTML、CSSの記載方法です。

案外簡単に実装でき、HTMLは、tableにクラス指定し、CSSは少しゴニョゴニョすればればOKです。

【HTML】

<table class="scroll">
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

【CSS】

/*（PCファーストっす）*/

table.scroll {
width:100%;
table-layout: inherit;
white-space: inherit;
-webkit-overflow-scrolling: touch; /* スマホでなめらかスクロール */
}

@media (max-width: 767px){ /*スマホとかは、横スクロールバーを表示*/
    table.scroll{
    overflow-x: scroll; /* 横スクロール処理 */
    white-space:nowrap;/* 自動改行させない */
    display: block;
    }
}

処理なし、処理なしの実例

■スクロール処理なし
芸名	本名
滝川クリステル	滝川・ラルドゥ・クリステル・雅美
フジ子・ヘミング	イングリット・フジコ・フォン・ゲオルギー＝ヘミング
水原希子	オードリー・希子・ダニエル
ハリー杉山	杉山ヘンリーアドリアンフォリオットスコットストークス

現在Cocoonテーマ使用中につき、自動的に横スクロールされるかと思いますが、こういった機能がWordpressテーマについていない場合は、横スクロールはされません。

■スクロール処理あり
（スマホで見ると違いがわかります。）
芸名	本名
滝川クリステル	滝川・ラルドゥ・クリステル・雅美
フジ子・ヘミング	イングリット・フジコ・フォン・ゲオルギー＝ヘミング
水原希子	オードリー・希子・ダニエル
ハリー杉山	杉山ヘンリーアドリアンフォリオットスコットストークス

このページをパソコンで表示していて、スマホで確認したい場合は、以下のQRコードをスマホで読み込んでください。

スクロールバーのカスタマイズ一例

スクロール可能になるとテーブルの下にスクロールバーが表示されます。
そのスクロールバーはCSSによりカスタマイズすることが可能です。

.scroll::-webkit-scrollbar{ /*スクロールバーの全体*/
    height: 5px;
}

.scroll::-webkit-scrollbar-track{ /*スクロールバーの背景*/
    background: #EEE;
}

.scroll::-webkit-scrollbar-thumb { /*スクロールバーのつまみ*/
    background: #BBB;
}

スクロールバー関係の疑似要素一覧

擬似要素	説明
::-webkit-scrollbar	スクロールバーの全体
::-webkit-scrollbar-button	スクロールバーの矢印ボタン
::-webkit-scrollbar-thumb	スクロールバーのつまみ
::-webkit-scrollbar-track	スクロールバーの背景
::-webkit-scrollbar-track-piece	スクロールバーの軌道
::-webkit-scrollbar-track-corner	水平と垂直のスクロールバーの交差部分
::-webkit-resizer	サイズ変更用のつまみ