不缩进的可折叠内容

Question

我正在使用折叠面板加载一些表格内容，它是表格格式 - 就像有三行和三列一样，如果我单击第一行的第一列，即该行的标题，它会展开并显示其详细信息，再次以表格格式显示， 附加图像 - 展开之前

第二张图片是当我点击订单时，它会展开并显示其详细信息。

问题是..当它展开时，它只在自己的列中显示其详细的表格数据，如在图像中你可以看到"FSDFDSFDS"列被排除在外，我正在尝试在它展开并显示详细信息时这样做，它应该显示在主标题整行下方的一整行中。

请参阅代码，任何帮助？？

<table class="table">

<tr>
<td>
<a class="btn btn-default hide_retail" data-toggle="collapse" href="#show_retail" id="hide_retail">Orders</a>
<div id="show_retail" class="panel-collapse collapse">
<div class="panel-body">
dsfsdfd
<table class="table">
<tr>
<td>sdfdsf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
<td>sdfdsf</td>
<td>sdfdsf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
</tr>
<tr>
<td>sdfdsf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
<td>sdfdsf</td>
<td>sdfdsf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
</tr>
<tr>
<td>sdfdsf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
<td>sdfdsf</td>
<td>sdfdsf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
<td>sfsdf</td>
<td>dsfsdf</td>
</tr>
</table>
</div>
</div>
</td>

<td>fsdfdsfds</td>

<tr>
<td>fdsdf</td>
<td>fddsfd</td>

更新：已解决 - 我得到了解决方案 - 在这里 -> https://www.bootply.com/glebkema/Qyh5hbEMdU

Answer 1

你必须改变你的HTML的结构，这是你问的表格，

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script> 
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tr data-toggle="collapse" data-target="#r1">
<td>Data</td>
<td>Data</td>
</tr>
<tr id="r1" class="collapse out">
<td>
Table inside the td
<table class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
<td>- Child column 2</td>
</tr>
<tr data-toggle="collapse" data-target="#r2">
<td>Data</td>
<td>Data</td>
</tr>
<tr id="r2" class="collapse out">
<td> - Child column 1</td>
<td>- Child column 2</td>
</tr>
</table>