Advertisement
何かを比較してまとめたい時に便利な表(Table)ですが、パソコンとスマホでは画面の大きさが違うので崩れてしまったり見にくくなったりします。
今回はそんな表を横スクロールできるようになる簡単なコードをご紹介します。
Advertisement
WordPressで表を崩さず横スクロールするHTMLの準備
まずは表示したい表を作ります。
ここで重要なのは幅を指定しておくというところです。
ブログのカラムのサイズに合わせて指定しておいてください。
今回はわかりやすくするためにわざと大きめに「1,000px」に設定しました。
これで下のような表が出来上がります。
かなりはみ出しましたね。
プランA | プランB | |
---|---|---|
価格 | 10000000000000000000000000000000000000000000000000円 | 20000000000000000000000000000000000000000000000000円 |
横スクロールできる表にする方法
次に、スクロールができるようにしていきます。
こちらも簡単、先ほどのコードに一行追加するだけです。
これで幅に収まった状態でスクロールできるようになりました。
プランA | プランB | |
---|---|---|
価格 | 10000000000000000000000000000000000000000000000000円 | 20000000000000000000000000000000000000000000000000円 |
そして、最後に幅をこのページに合わせて730pxに変更すれば、パソコンではスクロールなし、スマホなどの小さい画面で見るとスクロールありで表の中身を崩さずに表示させることができます。
行を増やしたいときは<tr>~</tr>までをどんどん繋げていってくださいね。
まずはコピペして使ってみてください。
わからないことがあればこのサイトもしくはココナラでCSSデザインのご相談も受けていますのでご連絡ください!
ABOUT ME

Advertisement
Advertisement