デザイン

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

 

横スクロールできる表にする方法

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

 

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

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

 

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

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

 

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

 

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

 

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

ココナラで詳しく見る直接相談してみる

ABOUT ME
アバター
helppostation
20代最後にプログラミングに目覚め、2017年7月にtech academyのJavaエンジニアリングコースを修了。 参考:【比較】初心者でもできるプログラミングはここから始めよう! 現在は自身のブログ作成に加え、初心者の方向けのブログ作成を請け負い中。 自身のブログはSEO対策により3ヶ月で10,000PVを突破し、まだまだ成長中 スキル HTML/CSS Java PhotoShop ※ココナラでも出品中!2018.3.24現在、13件の実績でご評価いただいています!