ワードプレス「表をカンタンに横スクロールする設定（HTMLコード）」

WordPressで表をせっかく作ったのに、スマホ版では上手く見れないなんてことありますよね。

今回は表を横にスクロールするためのHTMLコードをご紹介いたします。

HTMLコードと聞いて出来ないかも・・・と思った方も簡単ですのでぜひやってみてくださいね。

まず表を作成しましょう。

今回はわざと表が見切れてしまうように表のサイズを大きめに指定しました。

実際の表の内容はこんな感じ・・・

横幅指定した表はPCでもだいぶ見切れてますね。

スマホで見るとこんな感じ↓

全然右側の数字が見えていませんね！

これをHTMLコードを追加するだけで見やすく出来てしまいます。

HTMLコードを入れてみよう

テキストエディタの表の頭に<div style=”overflow: auto;“>

おしりに</div>を追加するだけ！！

↓
↓

表の下にグレーのスクロールが表示され表が左に移動するようになるので表全体を見ることが出来る様になりました。

スマホだとこんな感じです↓

まとめ

いかがでしたでしょうか？
たった２つにHTMLコードを追加するだけで簡単に横スクロールをすることが出来ました。
コピペしてぜひ活用してみてください。