Hide Table Row Using CSS

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>