WordPress(SANGO)で表を使うとき、PCでは表示がうまくいったけどスマホで表が画面からはみ出す、という時の解説策を説明しています。
スマホで表が画面からはみ出す
下のような表を別の記事で載せています。
下の表はPC画面での表示です。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-19.png)
この表をスマホで見てみると、
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-20-473x1024.png)
表が画面からはみ出してしまっています。
ちなみにエディタはGutenbergを使用しており、表の設定は、「モバイルで横スクロール」を選択していました。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-21.png)
解決方法
WordPressの管理画面で設定を変更すると、解決しました。
WordPressの管理画面から「外観 → カスタマイズ」を選択します。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/knowhow1-2.png)
メニューから、「詳細設定」を選択します。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-22.png)
下の方にスクロールして、「テーブルのスクロールを促すためにJSを読み込む」にチェックを入れて「公開」をクリックします。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/knowhow1-4.png)
これで、画面からはみ出していた表をスマホで見ると、はみ出さずにスクロールできるようになっていました。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/knowhow1-5.png)
さらに、表のタイプを「スクロールヒントを利用する」にすれば、スクロールできることがさらにわかりやすくなります。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-23.png)
下の画像がスクロールヒントを使用した結果です。スクロールができることがとてもわかりやすいです。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-24.png)
【補足】ストライプデザイン+スクロールヒント
Gutenbergのエディタで、「ストライプデザイン+スクロールヒント」という組み合わせは簡単にできます。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-23.png)
「ストライプ」を選択して、一番下の「高度な設定」の追加CSSクラスをコピーします。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-25.png)
「スクロールヒントを利用する」を選択して、「高度な設定」の追加CSSクラスに、既に書いてあるコードから半角スペースを空けて、先ほどコピーしたコードを貼り付けます。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-28.png)
これで、以下のようにストライプデザインでスクロールヒントを利用できています。
![](https://zatsugaku-engineer.com/wp-content/uploads/2021/08/image-27.png)