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-tbltd{
  border:0;
  border-bottom:1px solid black;
}

<tableclass="main"><tr><tdstyle="width:50px;">3</td><tdstyle="width:50px;">39</td><tdstyle="width:250px;">
        x<br>x<br>x<br>x<br>x<br></td><tdstyle="vertical-align:top;"><tableclass="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;
}
tableth{
  background:#0095ff;
  color:#fff;
  height:50px;
  vertical-align:middle;
}
.child-tbl{
  border:0;
}
.child-tbltd{
  border:0;
  border-bottom:1px solid #bbb;
  height:50%;
}
.child-tbltr:last-childtd{
  border-bottom:0;
}
.child-tbltd:first-child{
  border-right:1px solid #bbb;
}
html,body{
  height:100%;
}
div{
  height:1px;
}

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