HTML

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

スマホ使用時等、表(テーブル)を横にスクロールしたい場合の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;
    }
}

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

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

(※ブラウザの画面の横幅を縮めるか、スマホで見ると違いがわかります。)

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

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

スクロール可能になるとテーブルの下にスクロールバーが表示されます。
そのスクロールバーは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サイズ変更用のつまみ

 

\ レンタルサーバーならコレ一択!! /

\ エックスサーバーと相性バッチリのドメイン!!/

関連記事

コメントを残す