Empty Space Coming Before Table Row When An Another Element In Row With Rowspan Has Bigger Data

I have created a table in which first 3 columns are spanning to multiple rows. Now when the data in any of the first three columns is smaller then the problem is not there, but if

Solution 1:

A)

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)

Also I made a mix of css codes that with it fit the height of right cells to its container. I user height:1px for the table container (div) and height:100% for 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>