Hide Table Row Using CSS - php

Question

Is it possible to hide table rows using CSS, I have a project that required this concept.
Here is my code:
style.css:
#hide-row { display:none; }
file.php
<table>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<div id="hide-row">
<?php foreach( $cops as $row ) { ?>
<tr>
<td><?php echo $row->name; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
<?php } ?>
</div>
</table>
But, It didn't work, the records still appear. Anybody help how to solve this case?
Any help will be appreciated. Thank You in Advanced !

Answer 1

Use a class instead of an id:
.hide-row { display:none; }
And in your html/php file:
<table>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<?php foreach( $cops as $row ) { ?>
<tr class="hide-row">
<td><?php echo $row->name; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
<?php } ?>
</table>
If you have to group your rows you could use a tbody tag instead of a div tag.
Can we have multiple <tbody> in same <table>?
.hide-row tr { display:none; }
And in your html/php file:
<table>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<tbody class="hide-row">
<?php foreach( $cops as $row ) { ?>
<tr>
<td><?php echo $row->name; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
<?php } ?>
</tbody>
</table>

Answer 2

You can't put divs as direct children of a < table> element. To hide single rows see jantimon's answer. If you want to group multiple rows use < tbody>:
css
.hide-row { display:none; }
php
<table>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<tbody class="hide-row">
<?php foreach( $cops as $row ) { ?>
<tr>
<td><?php echo $row->name; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
<?php } ?>
</tbody>
</table>

Answer 3

You can't nest a div inside a table tag directly. You'd have to give your rows a class, then hide that. Something like:
.hidden {
display: none;
}
<?php foreach( $cops as $row ) { ?>
<tr class="hidden">
<td><?php echo $row->name; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
<?php } ?>

Answer 4

you cannot have <div> outside <tr>.. give the class to <tr> and hide that..no need to create a <div> around it
html
<tr class="hide-row">
<td><?php echo $row->name; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
style.css
.hide-row { display:none; }

Answer 5

I would give each row you want hidden a hide-row class:
<tr class="hide-row">
Your CSS would then look like:
tr.hide-row { display: none; }
This then means you don't need the nested div.