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

HTML/CSS
スポンサーリンク

[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-table-x-scrollの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 サイズ変更用のつまみ

 

コメント

タイトルとURLをコピーしました