【ワードプレス】スマホで表組（テーブル）を見やすくスクロールさせる方法

今や、webサイトはスマホで見る人の方が多いそうです。
スマホ対応（レスポンシブレイアウト）は今や当たり前ですね。

ただ、スマホ画面になったとき困るのがテーブル（いわゆる「表組」）です。
２～３列ならまだしも、
５列も６列もなったら幅が狭くてしかたがないわけです。

こんな感じで。

例）料金表、時間割とか勤務表、予約表のイメージ

	月曜	火曜	水曜	木曜	金曜	土曜	日・祝
Aコース	1,000円	2,000円	2,000円	3,000円	4,000円	予約のみ受け付け	休み
Bコース	1,000円	2,000円	2,000円	3,000円	4,000円	予約のみ受け付け	休み
Cコース	1,000円	2,000円	2,000円	3,000円	4,000円	予約のみ受け付け	休み
Dコース	1,000円	2,000円	2,000円	3,000円	4,000円	予約のみ受け付け	休み
Eコース	1,000円	2,000円	2,000円	3,000円	4,000円	予約のみ受け付け	休み

 

これ、PCで見るとギリ大丈夫なんですけど、スマホだとかなり見辛い・・・

てか、はみ出ちゃってるんですよね。

 

こういう、料金表とか、スケジュール表、はどうしても横列が多くなってしまいます。

スクロール（横にスライド）できるようにすれば、一発解決なんですよね

 

▼スマホの場合は右にスクロールして見てね

 

これなら文字ズレすることもなく、

スッキリ見えるわけです。

 

コード解説

じゃ、どうするか、って話ですが

１）追加CSSに記述

下記を追加CSSにコピペしてください

/* テーブルを横にスクロール */
table {
 width: 100%;
}

/*tableをスクロールさせる*/
/*tableセル内にある文字の折り返し禁止*/
.scroll {
 overflow: auto;
 white-space: nowrap;
}

/*tableにスクロールバーを追加１*/
.scroll::-webkit-scrollbar {
 height: 5px;
}

/*tableにスクロールバーを追加２*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加３*/
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}

 

２）html

テーブルの最初と最後を<div>で囲こう。

<div class="scroll">
ここにtableコード
</div>

以上！