Скрыть строки таблицы, используя чистый CSS3 в Bootstrap DataMat

Question

Я использую 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 s, сколько есть между ними, и мне также пришлось переместить флажоквне <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 не работает, к сожалению.

Answer 1

Вы можете добиться этого с небольшими изменениями в вашем 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>

Вы также можете проверить это здесь