CSSのみの変更でテーブルレイアウトをレスポンシブ対応させたい

前提・実現したいこと

ワードプレスプラグインの「Attendance Manager」を利用しています。
個人用の週間シフト表がPC用でもスマホ用でも下記のように表示されます。

月	火	水	木	金	土	日
時間	時間	時間	時間	時間	時間	時間

これをスマホ用のみ

月	時間
火	時間
水	時間
木	時間
金	時間
土	時間
日	時間

と縦並びに表示するように設定したいと考えています。

発生している問題・エラーメッセージ

下記のように全項目が縦一列に並んでしまいます。

月
火
水
木
金
土
日
時間
時間
時間
時間
時間
時間
時間

該当のソースコード

HTML
1<table class="attmgr_weekly">
2 <tr>
3  <th class="wednesday">
4   <span class="date">5月20日</span>
5   <span class="dow">(水)</span>
6  </th>
7  <th class="thursday">
8   <span class="date">5月21日</span>
9   <span class="dow">(木)</span>
10  </th>
11  <th class="friday">
12   <span class="date">5月22日</span>
13   <span class="dow">(金)</span>
14  </th>
15  <th class="saturday">
16   <span class="date">5月23日</span>
17   <span class="dow">(土)</span>
18  </th>
19  <th class="sunday">
20   <span class="date">5月24日</span>
21   <span class="dow">(日)</span>
22  </th>
23  <th class="monday">
24   <span class="date">5月25日</span>
25   <span class="dow">(月)</span>
26  </th>
27  <th class="tuesday">
28   <span class="date">5月26日</span>
29   <span class="dow">(火)</span>
30  </th>
31 </tr>
32 <tr>
33  <td class="wednesday not_working">-</td>
34  <td class="thursday working">17:30 ~ 21:00</td>
35  <td class="friday working">15:30 ~ 21:00</td>
36  <td class="saturday working">17:30 ~ 21:00</td>
37  <td class="sunday working">19:30 ~ 21:00</td>
38  <td class="monday not_working">-</td>
39  <td class="tuesday not_working">-</td>
40 </tr>
41</table>

CSS
1/**
2 *	Weekly personal schedule
3 */
4table.attmgr_weekly {
5	width: 100%;
6	border-collapse: collapse !important;
7	border: 1px solid #ddd;
8}
9table.attmgr_weekly th,
10table.attmgr_weekly td {
11	width: 14.2%;
12	padding: 5px auto;
13	vertical-align: middle !important;
14	text-align: center;
15	border: 1px solid #ddd !important;
16}
17table.attmgr_weekly .date {
18	font-size: 0.9em;
19}
20table.attmgr_weekly .dow {
21	margin-left: 5px;
22	font-size: 0.8em;
23}
24table.attmgr_weekly td.working {
25
26}
27table.attmgr_weekly td.not_working {
28	background-color: #f6f6f6;
29}

試したこと

下記CSSを追加しました。

CSS
1@media screen and (max-width: 768px) {
2table.attmgr_weekly {
3	width: 100%;
4    display: block;
5}
6table.attmgr_weekly th {
7	width: 40%;
8    display: block;
9    float: left;
10}
11table.attmgr_weekly td {
12	width: 60%;
13	display: block;
14    float: left;
15}
16

補足情報（FW/ツールのバージョンなど）

ワードプレス:バージョン5.4.1
Attendance Manager：バージョン0.5.8
を使用しています。

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

回答1件

ベストアンサー

Flexレイアウトを使うのはどうですか？
サンプル

css
1@media screen and (max-width: 768px) {
2table.attmgr_weekly{
3    width: auto;
4}
5table.attmgr_weekly tbody{
6    display: flex;
7}
8table.attmgr_weekly tr {
9    display: flex;
10    flex-flow: column;
11}
12table.attmgr_weekly th,
13table.attmgr_weekly td{
14    width: auto;
15}