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

Blog

2020.05.17

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

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

Rano

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

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

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

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

早速解説していきます。

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

横スクロール設定前

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

横スクロール設定後

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

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

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

column_widths=”〇〇％|〇〇％|〇〇％|”/

例）

高さ×辺	H×B （㎜）	t1 （㎜）	t2 （㎜）	r （㎜）	断面積 A （㎠）	単位質量 W （㎏/m）
100×50	100×50	5	7	8	11.85	9.30
100×100	100×100	6	8	8	21.59	16.9
125 ×60	125×60	6	8	8	16.69	13.1
125×125	125×125	6.5	9	8	30.0	23.6
150×75	150×75	5	7	8	17.85	14.0
150×100	148×100	6	9	8	26.35	20.7
150×150	150×150	7	10	8	39.65	31.1
175×90	175×90	5	8	8	22.9	18.0
175×175	175×175	7.5	11	13	51.43	40.4
175×175	198×99	4.5	7	8	22.69	17.8
200×100	200×100	5.5	8	8	26.67	20.9
200×150	194×150	6	9	8	38.11	29.9
200×200	200×200	8	12	13	63.53	49.9
250×125	248×124	5	8	8	31.99	25.1
250×125	250×125	6	9	8	36.97	29.0
250×175	244×175	7	11	13	55.49	43.6
250×250	250×250	9	14	13	91.43	71.8
300×150	298×149	5.5	8	13	40.80	32.0
300×150	300×150	6.5	9	13	46.78	36.7
300×200	294×200	8	12	13	71.05	55.8
300×300	300×300	10	15	13	118.5	93
350×175	346×174	6	9	13	52.45	41.2
350×175	350×175	7	11	13	62.91	49.4
350×250	340×250	9	14	13	99.53	78.1
350×250	350×350	12	19	13	171.9	135
400×200	396×199	7	11	13	71.41	56.1
400×200	400×200	8	13	13	83.37	65.4
400×300	390×300	10	16	13	133.3	105
400×400	400×400	13	21	22	218.7	172
400×400	414×405	18	28	22	295.4	232
400×400	428×407	20	35	22	360.7	283
400×400	458×417	30	50	22	528.6	415
400×400	498×432	45	70	22	770.1	605
450×200	446×199	8	12	13	82.97	65.1
450×200	450×200	9	14	13	95.43	74.9
450×300	440×300	11	18	13	153.9	121
500×200	496×199	9	14	13	99.29	77.9
500×200	500×200	10	16	13	112.3	88.2
500×300	482×300	11	15	13	141.2	111
500×300	488×300	11	18	13	159.2	125
600×200	596×199	10	15	13	117.8	92.5
600×200	600×200	11	17	13	131.7	103
600×300	582×300	12	17	13	169.2	133
600×300	588×300	12	20	13	187.2	147
600×300	594×302	14	23	13	217.1	170
700×300	692×300	13	20	18	207.5	163
700×300	700×300	13	24	18	231.5	182
800×300	792×300	14	22	18	239.5	188
800×300	800×300	14	26	18	263.5	207
900×300	890×299	15	23	18	266.9	210
900×300	900×300	16	28	18	305.8	240
900×300	912×302	18	34	18	360.1	283
900×300	918×303	19	37	18	387.4	304