Jquery 嵌套表响应对齐

我有一个父表和三个子表。在主表中，我想显示父表中的一行，以及三个子表中嵌套表的第二行，并使所有这些都响应

我的问题是，三个嵌套表与主表中的列对齐，随着屏幕大小的缩小，我无法找到将它们与主表列分离的方法。我希望子表在父列缩小以适应宽度时堆叠。任何想法都将不胜感激

我正在使用jquery和bootstrap3。我本来打算用JSFIDLE来展示一个示例，但现在看来我可以在这里嵌入它了！只需点击运行代码按钮

.parent{
背景颜色：浅蓝色；
}

父col1
父col2
父col3
父col4
父行1数据1
父行1数据2
父行1数据3
父行1数据4
child1 col 1
child1 col 2
child1行1数据1
child1行1数据2
child2 col 1
child2 col 1
child2行1数据1
child2第1行数据2
儿童3第1列
child3 col 2
child3第1行数据1
child3第1行数据2
child3第2行数据1
child3第2行数据2
父行2数据1
父行2数据2
父行2数据3
父行2数据4
child1 col 1
child1 col 2
child1行1数据1
child1行1数据2
child2 col 1
child2 col 1
child1行1数据1
child1行1数据2
儿童3第1列
child3 col 2
child3第1行数据1
child3第1行数据2
child3第2行数据1
child3第2行数据2
父行3数据1
父行3数据2
父行3数据3
父行3数据4
child1 col 1
child1 col 2
child1行1数据1
child1行1数据2
child2 col 1
child2 col 1
child2行1数据1
child2第1行数据2
儿童3第1列
child3 col 2
child3第1行数据1
child3第1行数据2
child3第2行数据1
child3第2行数据2

这里有两个想法可以尝试。。。为此，包含多个表的行中的main

标记具有

，因此td是1个单元格，可在所有4行中展开。然后将这三个表嵌套在一个表中，以帮助它们独立于父表，并防止单元格中出现单元格

<tr>        
<td colspan="4">
<table>
<tr>

<td>    
... table 1 code ...
</td>

<td>
... table 2 code ...
</td>

<td>
... table 3 code ...
</td>

</tr>
</table>
</td>
</tr>

---

跟进-在你原来的d

<tr> 
<td colspan="4" class="child-holder">

<div>    
... table 1 code
</div>

div {
display:inline-block;
vertical-align:top;
}

<!-- row 3 -->    
<tr>
<td></td>    
<td colspan="3" class="child-holder">

<div>    
<table class="table table-responsive table-condensed">