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

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

ただ、スマホ画面になったとき困るのがテーブル(いわゆる「表組」)です。
2~3列ならまだしも、
5列も6列もなったら幅が狭くてしかたがないわけです。

こんな感じで。

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

月曜 火曜 水曜 木曜 金曜 土曜 日・祝
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で見るとギリ大丈夫なんですけど、スマホだとかなり見辛い・・・

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

 

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

スクロールできるようにすれば、一発解決なんですよね

 

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

月曜 火曜 水曜 木曜 金曜 土曜 日・祝
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円 予約のみ
受け付け
休み

 

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

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

 

コード解説

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

1)追加CSSに記述

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

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

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

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

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

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

 

2)html

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

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

以上!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です