ブログで表をきれいに作ったのに、スマホで見ると残念な結果になってることありますよね。表が圧縮されて文字が折返しになってしまって、何書いてあるのか分からなくなります。
本記事は、スマホでもきれいに表(テーブル)が見やすくなる横スクロールの方法を紹介します。

PCの表(テーブル)

スマホの表(テーブル) とても見にくい

横スクロールさせる方法
①スクロールするためのCSSの追加
/*テーブルの横スクロールのためのCSSはここから*/
table{width:100%;}
.scroll{overflow: auto;white-space:nowrap;}
.scroll::-webkit-scrollbar{height: 15px;}
.scroll::-webkit-scrollbar-track{background: #f1f1f1;}
.scroll::-webkit-scrollbar-thumb{background: #bbb;}
/*テーブルの横スクロールのためのCSSはここまで*/
この上のコードをすべてコピペしてください。最初と最後の文字も入っていても問題ないです。なんのコードなのかすぐわかるので入れておきましょう。
外観からカスタマイズを開いてください。左のメニューから追加CSSをクリックしてください。↓

次に空いているスペースにスクロールするためのコードを貼り付けてください。↓

最後に公開をクリックしてここまで完了です。
②表(テーブル)に横スクロールさせる指示のコードを追加
表(テーブル)のコードの最初と最後に追加コードを入れる。
最初に <div class=”scroll”>
最後に </div>
実際に横スクロールさせる投稿ページを開いてください。表をクリックして「オプション」を開いてください。↓

次に「HTMLとして編集」をクリックしてください。↓

HTMLのコードに変わります。その最初と最後に追加のコードを貼り付けます。↓

最初は <div class=”scroll”> を貼り付けてください。↓

最後は </div> を貼り付けてください。↓

最後に表(テーブル)に戻します。 また「オプション」を開いて、「ビジュアル編集」をクリックします。↓
これで完了です。スマホでスクロールするのか確認してください。

スマホでの表(テーブル)の横スクロールの状況↓


今後は表(テーブル)を作った時に、このコードを入れるだけでスクロールできるようになります。
まとめ
表(テーブル)の横スクロールさせて、スマホでもきれいに見やすい表(テーブル)の紹介しました。
CSSなどのコードでの編集は難しい事もありますが、今回は簡単に貼り付けるだけで編集できました。
参考になればありがたいです。