我将 Bootstrap 与数据表一起使用，并希望使用纯 CSS 隐藏特定的表行，没有任何 JavaScript/jQuery。
我想，我可以这样做，但不幸的是，它不起作用:
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>请注意，Bootstrap 和数据表正在添加一些 divs那里和最后，它之间还有一些 HTML 标记。
这就是为什么我不想使用这个解决方案的原因:
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>我不喜欢这个解决方案，因为你必须计算并添加那么多 div因为介于两者之间，所以我还必须将复选框移到 <div class="form-group"> 之外在 <div class="table-responsive"> 里面.
如果有一个更简单的解决方案，比如下面第一个显示的 HTML 代码的代码，那就更好了:
input[name=hide_rows] + * table tr.hide-this-row {
display: table-row;
}
input[name=hide_rows]:checked + * table tr.hide-this-row {
display: none;
}
不幸的是，最后的 CSS 代码不起作用。
最佳答案
您可以通过对 html 进行微小更改来实现此目的。如果您将 table-responsive div 移动到复选框下方的 form-group 中，那么您将能够隐藏行。
代码如下:
<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;
}
片段:
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>也可以查一下here
关于html - 在 Bootstrap 数据表中使用纯 CSS3 隐藏表行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52633203/