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 !

do you have multiple `hide-row` ids? – Vimalnath Mar 27 '13 at 09:15 — Vimalnath, Mar 27 '13 at 09:15

score 11 · Accepted Answer · edited May 23 '17 at 12:31

11

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>

edited May 23 '17 at 12:31

Community

1
1

answered Mar 27 '13 at 09:15

jantimon

36,840
23
122
185

Thank you Jantimon, it works perfectly. I choose the 2nd option. Actually I want to display it in smooth toggle via Jquery when the user click something that related to the iterations. -) – Plipus Tel Mar 27 '13 at 09:57
This is accepted answer but better solution is here https://stackoverflow.com/questions/1144123/how-can-i-hide-an-html-table-row-tr-so-that-it-takes-up-no-space and the reason is that page position ( scrolling ) is different. With `display:none` is incorrect when table is big and hide/show button is under table. With `visibility:collapse` cursor is where it should be after rows are hidden. – mojmir.novak Nov 27 '21 at 22:18

martijnve · Answer 2 · 2013-03-27T09:25:13.347

3

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>

edited Mar 27 '13 at 09:25

answered Mar 27 '13 at 09:20

martijnve

993
2
9
23

1

+1 for no div child of a `table` (or `tbody` or `thead` or `tfoot`). Descendant, yes, if there `tr` in-between (I edited your answer to reflect the fact that you can have divs in a table, but in `tr>td` or `tr>th`) – FelipeAls Mar 27 '13 at 09:22

score 2 · Answer 3 · answered Mar 27 '13 at 09:16

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 } ?>

score 2 · Answer 4 · answered Mar 27 '13 at 09:16

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; }

score 2 · Answer 5 · answered Mar 27 '13 at 09:17

2

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.

answered Mar 27 '13 at 09:17

James

1,950
3
22
39

Hide Table Row Using CSS

5 Answers5