ワードプレスの表を横スクロールにする方法｜THORのスマホのみをパソコンにも拡張できる

ワードプレスで表を作るのって何かと面倒ですよね。

エクセルを使い慣れている人にとっては、こんなにも思い通りに動かないのかとあきらめたくなる気持ちもあるでしょう。私も毎回作りたい形の表ができずに、気合を入れないと作業に入れない時期がありました。

最近、このブログに使っているテンプレート「STORK」以外に、アフィリエイト用としてTHORを購入してみました。ランキングをたくさん作れたり、見た目もかなり可愛いなど使い方さえ一度一通りやれば綺麗なサイトがデキるというメリットを感じています。

ただ、スクロールできる表を作りたいと思った時には標準ではうまくいかないのです。

THORのスクロールテーブル使いにくい

THORには最初から色々なパーツが使えるショートコードやタグが設定されているのですが、「スマホテーブル横スクロール」がいまひとつうまく使えないんです。

このボタンを押すことでエディタで点線枠が出てきて、その中で表を作ったものはスマホで見ると横スクロールができるようになるというものなのです。

私が使う限り幅広の表をつくると、パソコンではみ出ちゃうのですよね。表のプロパティで幅を「100％」とレスポンシブ対応しても読み込まれないという。パソコンとスマホ両方でみれなきゃ意味ないじゃん！

ということで、プラグイン不要でパソコンとスマホ両方でスクロールできる表を作る方法をお伝えします。

まずはCSSを入れる

.scrollable-table th{
background-color: #eee;
}

.scrollable-table th,
.scrollable-table td{
border: solid 1px #ccc;
padding: 3px 5px;
white-space: nowrap;
}

.scrollable-table {
overflow-x: auto;
margin-bottom: 1em;
max-width: 770px;
}
[/css]

表を作るときの記述方法

</table>
</div>
[/html]