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

Question

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

Answer 1

<强> A）

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强> B）

我还制作了一些css代码，它与右侧单元格的高度相适应。我为height:1px容器（table）和div height:100%用户table：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;