Hidden Rows in Bootstrap have a height - html

Question

Sure this has a simple answer but can't get my head around it.
I have bootstrap table that has hidden rows that display on click of the row that it's hidden behind. However, the hidden rows show up and I can't get them to disappear when they're not selected.
Trying to get rid of the highlighted space between rows as per this pic:
<table class='table table-hover table-bordered table-striped'>
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>GuideWire</th>
</tr>
</thead>
<tbody>
<tr data-toggle='collapse' data-target='#info_1'>
<td>Good</td>
<td>FooBar</td>
<td>Something else</td>
</tr>
<tr>
<td colspan='8' class='hidden-row'>
<div class='collapse' id='info_1'>
<table class="table table-condensed table-sm small">
<thead>
<th>ABC</th>
<th>DEF</th>
</thead>
<tbody>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-toggle='collapse' data-target='#info_2'>
<td>Good 2</td>
<td>FooBar 2</td>
<td>Something else 2</td>
</tr>
<tr>
<td colspan='8' class='hidden-row'>
<div class='collapse' id='info_2'>
<table class="table table-condensed table-sm small">
<thead>
<th>ABC</th>
<th>DEF</th>
</thead>
<tbody>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
If you know how to get .table-striped to ignore hidden rows too, that'd be great.

Answer 1

It's the top & bottom padding. You can reset it with..
.table>tbody .hidden-row {
padding: 0 8px;
}
http://www.codeply.com/go/Ev7XStMM0f
This way it's only adjusting the hidden-row, and not overriding the Bootstrap table defaults. Also, you probably want to keep the left/right padding so the columns in the hidden-row align properly.

Answer 2

Its the padding which is giving it the space.
This should work
.table>tbody>tr>td.hidden-row, .table>tbody>tr>th.hidden-row,
.table>tfoot>tr>td.hidden-row,
.table>tfoot>tr>th.hidden-row, .table>thead>tr>td.hidden-row,
.table>thead>tr>th.hidden-row {
padding: 0;
}

Answer 3

Reset the css properties
.table.table-hover {
line-height: 0;
height: 0px;
padding: 0;
}

Answer 4

Try the below code and let me know if it works for you
**CSS**
.inner-table-data
{
margin-bottom: 0;
}
**HTML**
<table class='table table-hover table-bordered table-striped'>
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>GuideWire</th>
</tr>
</thead>
<tbody>
<tr data-toggle='collapse' data-target='#info_1'>
<td class="col-sm-4">Good</td>
<td class="col-sm-4">FooBar</td>
<td class="col-sm-4">Something else</td>
</tr>
<tr>
<td colspan='1' class='collapse' id='info_1'>
<div>
<table class="table table-striped inner-table-data">
<thead>
<th>ABC</th>
<th>DEF</th>
</thead>
<tbody>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-toggle='collapse' data-target='#info_2'>
<td class="col-sm-4">Good 2</td>
<td class="col-sm-4">FooBar 2</td>
<td class="col-sm-4">Something else 2</td>
</tr>
<tr>
<td colspan='1' class='collapse' id='info_2'>
<div>
<table class="table table-striped inner-table-data">
<thead>
<th>ABC</th>
<th>DEF</th>
</thead>
<tbody>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>