在Bootstrap数据表中使用纯CSS3隐藏表行

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 div s 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