collapsable content not indenting - html

Question

I am loading some table content with collapse-panel, its in tabular format - like there are three rows and three columns , if i click on first column of first row which is header of that row , it expands and show its details, which again in tabular format,
image attached - before expanding
second image is when i click on orders , it expands and show its details.
the problem is .. when it expands , it shows its detailed table data only in its own column , as in image you can see "fsdfdsfds" column is excluded, i am trying to do that when it expands and show the details , it should show in a full row just below the entire row of main header ..
please see the code , any help ??
<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>
UPDATE : SOLVED -- i got the solution -- here-- > https://www.bootply.com/glebkema/Qyh5hbEMdU

Answer 1

You have to change structure of your HTML, here is the table what you asked,
<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>