htmlのtableタグで複雑な表を作る方法

下の様な表が2つくっつき、中に更に小さい表を作るにはどの様なtableの組み方になるのでしょうか↓

今のコードは

html
1 <table>
2        <tbody>
3          <tr>
4            <th>現在生産品番</th>
5            <td>PRO-001</td>
6            <td class="td2" rowspan="9">状態別合計時間</td>
7          </tr>
8          <tr>
9            <th>計画数（直全体）</th>
10            <td>5,000</td>
11            <td><table>
12              <tbody>
13                <tr>
14                  <th class="green">
15                    稼働
16                  </th>
17                  <td>42分</td>
18                </tr>
19                <tr>
20                <th class="red">
21                    異常
22                  </th>
23                  <td>5分</td>
24                </tr>
25                <tr>
26                <th class="yellow">
27                    メンテ中
28                  </th>
29                  <td>0分</td>
30                </tr>
31                <tr>
32                <th class="blue">
33                    段替え
34                  </th>
35                  <td>12分</td>
36                </tr>
37                <tr>
38                <th class="gray">
39                    停止
40                  </th>
41                  <td>17分</td>
42                </tr>
43              </tbody>
44            </table>
45          </td>
46          </tr>
47          <tr>
48            <th>計画数（現時点）</th>
49            <td>444</td>
50          </tr>
51          <tr>
52            <th>不足数</th>
53            <td>4,556</td>
54          </tr>
55          <tr>
56            <th>実績数</th>
57            <td>442</td>
58          </tr>
59          <tr>
60            <th>遅れ</th>
61            <td>10分</td>
62          </tr>
63          <tr>
64            <th>進捗率</th>
65            <td>82%</td>
66          </tr>
67          <tr>
68            <th>稼働率</th>
69            <td>86%</td>
70          </tr>
71          <tr>
72            <th>サイクルタイム</th>
73            <td>5秒／個</td>
74          </tr>
75        </tbody>
76      </table>
77コード

と書いているのですが、これだと小さいtableが外に飛び出してしまいます。

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

回答1件

ベストアンサー

結合しているのは「状態別合計時間」のセルなので、そちらに小さいテーブルを入れればいいのではないかと思います。

html
1<table>
2  <tbody>
3    <tr>
4      <th>現在生産品番</th>
5      <td>PRO-001</td>
6      <td class="td2" rowspan="9" style="vertical-align:top;">状態別合計時間<br>
7        <table>
8          <tbody>
9            <tr>
10              <th class="green">
11                稼働
12              </th>
13              <td>42分</td>
14            </tr>
15            <tr>
16              <th class="red">
17                異常
18              </th>
19              <td>5分</td>
20            </tr>
21            <tr>
22              <th class="yellow">
23                メンテ中
24              </th>
25              <td>0分</td>
26            </tr>
27            <tr>
28              <th class="blue">
29                段替え
30              </th>
31              <td>12分</td>
32            </tr>
33            <tr>
34              <th class="gray">
35                停止
36              </th>
37              <td>17分</td>
38            </tr>
39          </tbody>
40        </table>
41      </td>
42    </tr>
43    <tr>
44      <th>計画数（直全体）</th>
45      <td>5,000</td>
46    </tr>
47    <tr>
48      <th>計画数（現時点）</th>
49      <td>444</td>
50    </tr>
51    <tr>
52      <th>不足数</th>
53      <td>4,556</td>
54    </tr>
55    <tr>
56      <th>実績数</th>
57      <td>442</td>
58    </tr>
59    <tr>
60      <th>遅れ</th>
61      <td>10分</td>
62    </tr>
63    <tr>
64      <th>進捗率</th>
65      <td>82%</td>
66    </tr>
67    <tr>
68      <th>稼働率</th>
69      <td>86%</td>
70    </tr>
71    <tr>
72      <th>サイクルタイム</th>
73      <td>5秒／個</td>
74    </tr>
75  </tbody>
76</table>