【しらべごと】WordPress 表をスクロールさせる　おすすめ！超簡単な方法

ホームページで比較表やアイテム一覧など「横長」の表を入れる時、表を横にスクロールする超簡単な方法を調べました。

このホームページはwordpressで作成しています。

ビジュアルエディタを拡張するプラグイン「TinyMCE Advanced」を使っています。

スクロールできない表

下の表は横にはみ出していると思います。（特にスマホでは）

111111111	2222222222	333333333	4444444444444	55555555	666666666666666666666666666666666
7777777777	8888888888	999999999	101010101010	11111111	121212121212121

 

スクロールできる表

先ほど作った表をテキストエディタで編集します。

テーブルを次のソースで囲むだけです

<div style=”width:100%; overflow-y:scroll;”>

</div>

具体的には、黄色線の部分に入れました。

<table style ………>

</table style>

を囲むように２行追加します。

横にスクロールできる表ができました。

 

まとめ

cssやphpを編集することなく、とても簡単に横スクロールができるようになりました。