html - 当具有 rowspan 的行中的另一个元素具有更大的数据时，表行之前出现空白

Question

<分区>

Answer 1

一)

table {
  border-collapse: collapse;
  width:100%;
  height:100%;
}
table, th, td {
    border: 1px solid black;
}
.child-tbl{
border:0;
}
.child-tbl td{
  border:0;
  border-bottom:1px solid black;
}

<table class="main">
  <tr>
    <td style="width:50px;">3</td>
    <td style="width:50px;">39</td>
    <td style="width:250px;">
        x<br>x<br>x<br>x<br>x<br>
    </td>
    <td style="vertical-align:top;">
      <table class="child-tbl">
        <tr>
          <td>6</td>
          <td>aaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>
        <tr>
          <td>7</td>
          <td>bbbbbbbbbbbbbbbbbbbbbbb</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

---

B)

我还混合了 css 代码，使正确的单元格高度适合其容器。我为 table 容器 (div) 使用 height:1px，为 table 使用 height:100% :

table {
  border-collapse: collapse;
  width:100%;
  height:100%;
}
table, th, td {
  border: 1px solid #bbb;
}
table th{
  background:#0095ff;
  color:#fff;
  height:50px;
  vertical-align:middle;
}
.child-tbl{
  border:0;
}
.child-tbl td{
  border:0;
  border-bottom:1px solid #bbb;
  height:50%;
}
.child-tbl tr:last-child td{
  border-bottom:0;
}
.child-tbl td:first-child{
  border-right:1px solid #bbb;
}
html,body{
  height:100%;
}
div{
  height:1px;
}

<div>
  <table class="main">
    <tr>
      <th style="width:50px;">Col 1</th>
      <th style="width:50px;">Col 2</th>
      <th style="width:150px;">Col 3</th>
      <th>
        <table class="child-tbl">
            <tr>
              <td style="width:50px;">Col 4</td>
              <td>Col 5</td>
            </tr>
         </table>
      </th>
    </tr>
    <tr>
      <td style="width:50px;">3</td>
      <td style="width:50px;">39</td>
      <td style="width:150px;">
          x<br>x<br>x<br>x<br>x<br>
      </td>
      <td style="vertical-align:top;">
        <table class="child-tbl">
          <tr>
            <td style="width:50px;">6</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaa</td>
          </tr>
          <tr>
            <td>7</td>
            <td>bbbbbbbbbbbbbbbbbbbbbbb</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
<div>