【コピペOK】WordPressで表の幅を指定して横スクロールにするHTML(初心者向け)

表の横スクロール【2020年5月2日更新】

何かを比較するときに便利の表ですが、表の中の文字数が多かったりするといびつな形の表になってしまい、webデザインが崩れてしまうときがあります。

パソコンでの見た目が大丈夫でもスマホで見るととても変になっているということはよくありがちなトラブルです。

今回の記事では、表のデザインを崩さずに横スクロールできる表のHTMLを紹介していきます。

webサイト全体の表ではなく、単体の表について指定するHTMLだよ!

【本記事の特徴】

○単体の表の横幅の指定方法がわかる。

○単体の表の横幅を変えないで横スクロールにする方法がわかる。

○コピペOK

WordPressで表の幅を指定する方法

表を横スクロールにするためには、幅を指定しなければなりません。

表の幅HTML
サンプル表760px<table>タグに追記する

上の表のHTMLは以下のとおりです。

<figure class="wp-block-table">
<table style="width: 760px;">
<tbody>
<tr><td></td><td>表の幅</td><td>HTML</td></tr>
<tr><td>サンプル表</td><td>760px</td><td><table>タグに追記する</td></tr>
</tbody>
</table>
</figure>

ワードプレスのテーマによっては、もうこの時点で横スクロールができるようになっているモノもあるんだ!
でも、念のため、次の章のコードも付け加えておくことをおすすめするよ!

上記と重複しますが、ここで重要なことは、表を横スクロールにするためには表の幅を指定しておく必要があると言うことです。

以下の画像は完全初心者のためのWordPressの操作手順です。

今回の例では760pxにしましたが、あなたのwebデザインに合わせて数値を変更して使ってください。

幅を指定した表を横スクロール仕様にする方法

<div style="overflow: auto;">

結論からいうと、上記のHTMLタグを<table>タグの前に入力するだけです。

</table>タグの後ろに</div>タグを入れることを忘れないように注意してください。

表の幅HTML
サンプル表760px<div>タグを配置する

上記の表のHTMLは以下のとおりです。

<figure class="wp-block-table">
<div style="overflow: auto;">
<table style="width: 760px;">
<tbody>
<tr><td></td><td>表の幅</td><td>HTML</td></tr>
<tr><td>サンプル表</td><td>760px</td><td><div>タグを配置する</td></tr>
</tbody>
</table>
</div>
</figure>

上記表の
①上から2行目の<div style=”overflow: auto;”>
②下から2行目の</div>

を追記しました。

以上で単体の表の横幅指定と横スクロール仕様が完成します。

今回は例として760pxでやってみたけど、これを730pxにするとパソコンでは横スクロールなし、スマホでは横スクロールありになることが多いよ!


2 thoughts on “【コピペOK】WordPressで表の幅を指定して横スクロールにするHTML(初心者向け)

    1. さとあつさん

      はじめまして!
      コメントありがとうございます。

      お役に立てる情報をお届けできたみたいでよかったです(^_^)

      分かりにくいところはありませんでしたか?
      分かりにくいところがあれば遠慮なくお伝えください。直ぐに改善します。

      ご存じかと思いますが、HTMLは一文字間違うだけでちゃんと反映されません。
      お使いのPCによっては、稀にコピペしたとき半角スペースが全角スペースになってしまうなどの現象があります。
      万が一を考え、一応、お伝えさせていただきますね(^_^)

コメントを残す

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