当具有行跨度的行中的另一个元素具有更大的数据时，表格行之前出现空白空间[关闭]

Question

我创建了一个表，其中前 3 列跨越多行。现在，当前三列中的任何一列中的数据较小时，问题就不存在了，但是如果数据较大并且行没有跨越多行，那么其余列上方就会出现空白空间。

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 代码，用它来适应其容器的右侧单元格的高度。我将height:1px 用于table 容器（div）和height:100% 用于table：

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>