匹配父子表格单元格的行高

Question

我在表内有一个子表。有用于插入新表的行跨度。

现在我的问题是当主表格单元格的内容增加时，相应单元格的子行也应该得到扩展。

这是表结构

<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td rowspan="3">
              <table border="0" class="child_table" cellspacing="0" cellpadding="0">
                <tr>
                  <td>Sub col 1</td>
                  <td>Sub col 2</td>
                </tr>
                <tr>
                  <td>Sub col 1</td>
                  <td>Sub col 2</td>
                </tr>
              </table>
            </td>
            <td>Col 4</td>
   </tr>
       <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>When the content of this cell increases I want the 2nd (respective) row of child table also to extend accordingly.</td>
   </tr>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 4</td>
   </tr>
  </table>

FIDDLE

Answer 1

jsBin demo

table{
  background:#C2E5FF;
  position:relative;
    height:100%;  /* Set 100% height */
}
td{
  border:1px solid #ccc;
  vertical-align:top;
  width:20%
                  /* Don't use height */
}
.child_table{
  background:#FFFFCA;
    width:100%;  /* Set width to 100% */
}