WordPressプラグイン『Tablepress』で横スクロール設定後の表の幅調整

 

WordPressのTablePress(プラグイン)で表を挿入したんですが、スマートフォンの際に見やすくするため横スクロールを設定したら、もとのPC上での表の幅が狭くなってしまいました。

どうすればもとにもどるんでしょうか?

Rano
Rano

TablePressの表の挿入は本当に簡単で便利ですが、細かいところで色々と不便なところがあります。

今回の解決策を本記事で解説していきます。

 

こんな悩みを解決します。

スポンサーリンク
記事内広告‐1

横スクロール設定後、PCの表の幅設定

早速解説していきます。

まずは横スクロール設定前の表の確認です。通常なにも設定してなければ自動に画面いっぱいに横幅を使います。

横スクロール設定前

 

横スクロールを設定後、下のような画像となります。スマートフォンでは横スクロールが追加され見やすくなりましが、PC画面右側に隙間ができてしまい、見栄え的によくありません。

横スクロール設定後

 

この隙間をなくし、横スクロールもそのまま使える方法があるんです!

 

まず記事を書く「エディター」を開いてください。

表を埋め込んだ「ショートコード」の綴りにコードを加えます。

column_widths=”〇〇%|〇〇%|〇〇%|”/
例)
高さ×辺H×B
(㎜)
t1
(㎜)
t2
(㎜)
r
(㎜)
断面積
A
(㎠)
単位質量
W
(㎏/m)
100×50100×5057811.859.30
100×100100×10068821.5916.9
125 ×60125×6068816.6913.1
125×125125×1256.59830.023.6
150×75150×7557817.8514.0
150×100148×10069826.3520.7
150×150150×150710839.6531.1
175×90175×9058822.918.0
175×175175×1757.5111351.4340.4
175×175198×994.57822.6917.8
200×100200×1005.58826.6720.9
200×150194×15069838.1129.9
200×200200×2008121363.5349.9
250×125248×12458831.9925.1
250×125250×12569836.97
29.0
250×175244×1757111355.4943.6
250×250250×2509141391.4371.8
300×150298×1495.581340.8032.0
300×150300×1506.591346.7836.7
300×200294×2008121371.0555.8
300×300300×300101513118.593
350×175346×174691352.4541.2
350×175350×1757111362.9149.4
350×250340×2509141399.5378.1
350×250350×350121913171.9135
400×200396×1997111371.4156.1
400×200400×2008131383.3765.4
400×300390×300101613133.3105
400×400400×400132122218.7172
400×400414×405182822295.4232
400×400428×407203522360.7283
400×400458×417305022528.6415
400×400498×432457022770.1605
450×200446×1998121382.9765.1
450×200450×2009141395.4374.9
450×300440×300111813153.9121
500×200496×1999141399.2977.9
500×200500×200101613112.388.2
500×300482×300111513141.2111
500×300488×300111813159.2125
600×200596×199101513117.892.5
600×200600×200111713131.7103
600×300582×300121713169.2133
600×300588×300122013187.2147
600×300594×302142313217.1170
700×300692×300132018207.5163
700×300700×300132418231.5182
800×300792×300142218239.5188
800×300800×300142618263.5207
900×300890×299152318266.9210
900×300900×300162818305.8240
900×300912×302183418360.1283
900×300918×303193718387.4304

『〇〇%』の箇所は、表の列ごとに必要な数字を入れてくれればいいです。

幅の大きさを固定したい場合は『〇〇px』としてください。尚、『px』と『%』を併用しても大丈夫です。

また、全て列ごとに『〇〇%』を設定しなくても、自動で横幅すべて使うようになっており、均等に割り振って列を並べてくれるので便利です。

 

 

 

 

コメント

タイトルとURLをコピーしました