WordPress スマホで表示される横長の表をスクロールさせる方法

WordPress スマホで表示される横長の表をスクロールさせる方法です。使用テーマはBizVektorです。

PCでは次のように表示されますが、

スマホでは次のように一行で表示されスクロールして端までみることができます。

スタイルCSSのカスタマイズ

① 左メニュで｢外観｣｢テーマの編集」を選択します。

② ｢子テーマ｣｢style.css｣を選択します。

③ 次を追記します。

/* スマホで横長の表をスクロールさせる */
@media (max-width: 640px) {
.table-scroll {
overflow-x: scroll;
}
}

HTML文中のtableタグを｢divタグ｣で囲む

① ビジュアルモードで作表します。

② テキストモードに切り替えてtableタグを次のdivタグで囲みます。

<table> の前に次を追記し、

<div class=”table-scroll”>

</table> の後に次を追記します。

</div>

TinyMCE Advancedを使用して作表する場合の注意

作表にはビジュアルエディタの機能を拡張するプラグインTinyMCE Advancedを使うのが便利です。このプラグインによって作られる表はレスポンシブ対応しています（表の横幅を画面サイズに自動で合わせる）。本稿で紹介した方法は、画面の横幅が640px以下のときにスクロールさせるものですから、レスポンシブ対応している表をスクロールさせることができません。そのために、TinyMCE Advancedで作った表をスクロールさせたいときは、次のような工夫が必要となります。

① TinyMCE Advanced 表のプロパティを選択する。