rowspanを設定しているが意図した表示と異なる。

Question

前提・実現したいこと

htmlでtableを作成しています。

このような表組みを作りたいのですが
下記のコードだと

こういう表示になってしまいます。

該当のソースコード

<table>
  <tbody>
    <tr>
      <th scope="col">1a</th>
      <th scope="col">1b</th>
      <th scope="col">1c</th>
      <th scope="col">1d</th>
      <th scope="col">1e</th>
    </tr>
    <tr>
      <th scope="row">2a</th>
      <td>2b</td>
      <td>2c</td>
      <td>2d</td>
      <td>2e</td>
    </tr>
    <tr>
      <th scope="row" rowspan="2">3a</th>
      <td rowspan="2">3b</td>
      <td>3c</td>
      <td rowspan="2">3d</td>
      <td rowspan="2">3e</td>
    </tr>
    <tr>
      <td rowspan="3">4c</td>
    </tr>
    <tr>
      <th scope="row">5a</th>
      <td>5b</td>
      <td>5d</td>
      <td>5e</td>
    </tr>
    <tr>
      <th scope="row">6a</th>
      <td>6b</td>
      <td>6d</td>
      <td>6e</td>
    </tr>
  </tbody>
</table>

どこが間違っているのでしょうか？

Answer 1

4cの入る行で、この行だけに収まるものがないために、高さが取られていないものと思われます。

trにheightを指定する、などの方法で対応することが考えられます（過去質問）。

Comments

[winter]

thやtdにheightを指定しても上手くいかないなぁと悩んでいました。
trにheightを設定するのは盲点でした。
おかげさまで解決できました。

過去ログ見落としていました。すみません

Answer 2

実は現状のコードでできてます。
拡大してみてください。

maisumakunさんが仰っているように4cに少し高さを与えてあげると良いです。

Comments

[winter]

「しかたないものか」と思いましたが
この図でなるほど合点がいきました。
大変ためになりました。

[m.ts10806]

私も動作確認していて該当箇所に「完全に平たくはないな」と違和感があって拡大してみました。
他にも線や背景などわかりやすい色をつけると問題の切り分けもしやすくなるので場合により使い分けてみてください