Hide table rows using pure CSS3 in Bootstrap datatable - html

Question

I use Bootstrap with datatables and would like to hide specific table rows using pure CSS, without any JavaScript / jQuery.
I thought, I can do it like this, but it doesn't work, unfortunately:
input[name=hide_rows] + table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + table tr.hide-this-row {
display: none;
}
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked>
</div>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
#endforeach
</tbody>
</table>
</div>
Please note, that Bootstrap and the datatable is adding some divs there and at the end, it has some more HTML tags between.
That's the reason, why I don't would like to use this solution:
input[name=hide_rows] + div > div > div > table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + div > div > div > table tr.hide-this-row {
display: none;
}
<div class="table-responsive">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked>
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
#endforeach
</tbody>
</table>
</div>
I don't like this solution as you have to count and add that much divs as there are between and I also had to move the checkbox outside the <div class="form-group"> and inside the <div class="table-responsive">.
It would be much better, if there is an easier solution like the below code for the first shown HTML code:
input[name=hide_rows] + * table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + * table tr.hide-this-row {
display: none;
}
The last CSS code is not working, unfortunately.

Answer 1

You can achieve this with minor change in your html. If you move your table-responsive div inside the form-group below checkbox then you will be able to hide the rows.
Here is a code:
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked/>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
CSS:
input[name=hide_rows] + .table-responsive .hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + .table-responsive .hide-this-row {
display: none;
}
Snippet:
input[name=hide_rows] + .table-responsive .hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + .table-responsive .hide-this-row {
display: none;
}
<div class="form-group">
<label for="hide_rows">Hide rows?</label>
<input type="checkbox" id="hide_rows" name="hide_rows" checked/>
<div class="table-responsive">
<table class="table table-condensed table-hover" id="some-table" data-order='[[ 0, "desc" ]]'>
<thead>
<tr>
<th>Head #1</th>
<th>Head #2</th>
<th>Head #3</th>
</tr>
</thead>
<tbody>
<tr class="show-this-row">
<td>Row #1</td>
<td>Row #1</td>
<td>Row #1</td>
</tr>
<tr class="hide-this-row">
<td>Row #2</td>
<td>Row #2</td>
<td>Row #2</td>
</tr>
<tr class="show-this-row">
<td>Row #3</td>
<td>Row #3</td>
<td>Row #3</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
You can also check it here