【簡単コピペ】Wordpressで表を崩さず横スクロールするHTML

何かを比較してまとめたい時に便利な表（Table）ですが、パソコンとスマホでは画面の大きさが違うので崩れてしまったり見にくくなったりします。

今回はそんな表を横スクロールできるようになる簡単なコードをご紹介します。

Contents

WordPressで表を崩さず横スクロールするHTMLの準備

まずは表示したい表を作ります。

ここで重要なのは幅を指定しておくというところです。

ブログのカラムのサイズに合わせて指定しておいてください。

今回はわかりやすくするためにわざと大きめに「1,000px」に設定しました。

これで下のような表が出来上がります。

かなりはみ出しましたね。

	プランA	プランB
価格	10000000000000000000000000000000000000000000000000円	20000000000000000000000000000000000000000000000000円

次に、スクロールができるようにしていきます。

こちらも簡単、先ほどのコードに一行追加するだけです。

これで幅に収まった状態でスクロールできるようになりました。

	プランA	プランB
価格	10000000000000000000000000000000000000000000000000円	20000000000000000000000000000000000000000000000000円

そして、最後に幅をこのページに合わせて730pxに変更すれば、パソコンではスクロールなし、スマホなどの小さい画面で見るとスクロールありで表の中身を崩さずに表示させることができます。

行を増やしたいときは<tr>~</tr>までをどんどん繋げていってくださいね。

まずはコピペして使ってみてください。

わからないことがあればこのサイトもしくはココナラでCSSデザインのご相談も受けていますのでご連絡ください！