困ったこと
Googleコンソールより、モバイルユーザビリティに問題があるとの連絡がきました。スマホの画面から要素がはみ出していますとのことでした。
CSSには、「width:100%」と記載しているのになんでだろう、と試行錯誤しました。なかなかうまくいかずに時間を要しました・・・単純にはいかんものです。
気になったのは、ちゃんとおさまっているページもあるということ。あれ、文章が長いテーブルがはみ出しているっぽい。ここを手掛かりに調べたら、解決しました。
HTML&CSSの困ったを解決！
テーブルが画面（スマホ）からはみ出してしまう
ワードプレス解決した方法
CSSに以下のコードを加えたら、テーブルが画面に収まりました！！
table td{
word-break: break-all;
}word-breakプロパティ とは、特に英単語等を途中で改行するか否かというプロパティで、おそらく日本語で長い文章だと、一つの単語と見なされて改行されないのがデフォルトのようです。
break-all 言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。
参考になったサイト
こんな方法も調べました
https://webcommu.net/phone-table-css/
こちらの記事で、
table{width:100%;table-layout: fixed; /*追加する*/}というのも紹介されていました。
こちらで、すべてのセルを均一の幅に分けることができます。
今回は、幅が同じだと見栄えが悪いので、上の方法を選択しました。