プラン表を作っていますが、レスポンシブにする方法がわかりません。

現在、HTMLで作成したレスポンシブ対応されていないサイトをWORDPRESSに移植中です。
TABLEのレスポンシブ化に困っております。
どうぞお力添え、アドバイスをいただけないでしょうか？

よろしくお願いします。

前提・実現したいこと

PCでは以下のように表示される料金表を作りたいと思っています。

モバイルで表示した場合は、以下のように表示したいです。

ですが、残念ながら現状以下のように行単位で折り返されてしまいます。

テーブルのHTML

HTML
1					<table class="plan">
2						<thead>
3							<tr>
4	             				<th class="plan1">Trialプラン</th>
5	             				<th class="plan2">Standardプラン</th>
6	             				<th class="plan3">Professionalプラン</th>
7							</tr>
8                		</thead>
9                		<tbody>
10							<tr>
11								<td class="plan1-i">
12									<p>－内容－</p>
13									<p>100件まで</p>
14								</td>
15								<td class="plan2-i">
16									<p>－内容－</p>
17									<p>200件まで</p>
18								</td>
19								<td class="plan3-i">
20									<p>－内容－</p>
21									<p>300件まで</p>
22								</td>
23							</tr>
24							<tr>
25								<td class="plan1-i">
26									<p>－詳細－</p>
27									<p>詳細1</p>
28								</td>
29								<td class="plan2-i">
30									<p>－詳細－</p>
31									<p>詳細2</p>
32								</td>
33								<td class="plan3-i">
34									<p>－詳細－</p>
35									<p>詳細3</p>
36								</td>
37							</tr>
38
39							<tr>
40								<td class="plan1-i">
41									<p>－費用－</p>
42									<p class="price">1万円/月</p>
43								</td>
44								<td class="plan2-i">
45									<p>－費用－</p>
46									<p class="price">2万円/月</p>
47								</td>
48								<td class="plan3-i">
49									<p>－費用－</p>
50									<p class="price">ASK</p>
51									<p class="asterisk">※内容に応じて期間変動</p>
52								</td>
53							</tr>
54                		</tbody>
55					</table>

現在のCSS

CSS
1.plan p {
2	font-weight: bold;
3	padding: 8px 0px;
4}
5
6.plan thead th {
7	font-size: 1.5em;
8	border-right: 10px solid #fff;
9	padding: 20px 0px;
10}
11
12.plan td {
13	width: calc(100% / 3);
14	border-right: 10px solid #fff;
15	text-align: center;
16	vertical-align: top;
17	padding: 20px 0px;
18}
19
20.plan1 {
21	background: #03A9F4;
22}
23
24.plan2 {
25	background: #cddc39;
26}
27
28.plan3 {
29	background: #fab9de;
30}
31
32.plan1-i {
33	background: #03A9F4;
34}
35
36.plan2-i {
37	background: #cddc39;
38}
39
40.plan3-i {
41	background: #fab9de;
42}
43
44.price {
45	font-size: 1.8em;
46}
47
48.asterisk {
49	font-size: .8em;
50}
51
52.f-red {
53	color: red;
54}
55
56@media screen and (max-width: 37.5em) {
57	.plan,
58	.plan tr,
59	.plan td,
60	.plan th {
61		display:block;
62		width:100%;
63	}
64}

当方のスキル

HTML…脱・初心者レベル
CSS…初心者レベル（勉強をはじめて1か月程度）

m.ts10806

2021/03/04 23:16

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 >をWORDPRESSに移植中なら、レスポンシブ対応しているテーマを使う、でいいんじゃないでしょうか。

kokoro8-_-8

2021/03/05 01:05

アドバイスありがとうございます。 code機能で編集させていただきました。 TCDのレスポンシブ対応のテーマを使用しています。ただ料金表の部分をテーブルで作ったため、現状の問題につまづいてしまいました。

行動規範の内容に同意します

回答1件

ベストアンサー

display: contents;でそのタグがなかったことにして、FlexBoxで縦にならべて、Orderで並べ替える。
ただし、display: contents;はIE非対応。IEに対応させたい場合は、HTMLでTABLEを使わない設計にすることになります。

css
1.plan p {
2  font-weight: bold;
3  padding: 8px 0px;
4}
5.plan thead th {
6  font-size: 1.5em;
7  border-right: 10px solid #fff;
8  padding: 20px 0px;
9}
10.plan td {
11  width: calc(100% / 3);
12  border-right: 10px solid #fff;
13  text-align: center;
14  vertical-align: top;
15  padding: 20px 0px;
16}
17.plan1,
18.plan1-i {
19  background: #03A9F4;
20}
21.plan2,
22.plan2-i {
23  background: #cddc39;
24}
25.plan3,
26.plan3-i {
27  background: #fab9de;
28}
29.price {
30  font-size: 1.8em;
31}
32.asterisk {
33  font-size: .8em;
34}
35.f-red {
36  color: red;
37}
38@media screen and (max-width: 37.5em) {
39  .plan {
40    display: flex;
41    flex-direction: column;
42  }
43  .plan thead,
44  .plan tbody,
45  .plan tr {
46    display: contents;
47  }
48  .plan th,
49  .plan td {
50    width:100%;
51    margin-bottom: 2px;
52  }
53  .plan th {
54    margin-top: 10px;
55  }
56  .plan th:nth-child(1),
57  .plan td:nth-child(1) {
58    order: 1;
59  }
60  .plan th:nth-child(2),
61  .plan td:nth-child(2) {
62    order: 2;
63  }
64  .plan th:nth-child(3),
65  .plan td:nth-child(3) {
66    order: 3;
67  }  
68}