Collapsible div as a row element - html

Question

I am trying to prepare a simple mark sheet [as an example to demonstrate my requirement]. Am planning to have a collapsible div which will render all the mark details once it is expanded.
<div class="well">
<table class="table table-bordered"
style="background:#fff; margin-bottom:10px;">
<tbody>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_1"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_1">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Physics </td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>2</td>
<td>PQR</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_2"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_2">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chemistry</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
fiddle
But in this approach, when a section is not expanded, the row which encloses the collapsible div appears like a blank row in the table - which is quite misleading.
I am sure this is not the best way to render this sort of details.Would like to know what are the alternate UI options to render these details.

Answer 1

Use this CSS:
td[colspan="3"] {
padding: 0;
}
Fiddle