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
– Vimalnath

2013-03-27 09:15:12 +00:00
Commented Mar 27, 2013 at 9:15 — Vimalnath
– Vimalnath, Commented Mar 27, 2013 at 9:15

Community · Accepted Answer · 2017-05-23 12:31:53Z

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, 2017 at 12:31

CommunityBot

11 silver badge

answered Mar 27, 2013 at 9:15

jantimon

38.5k23 gold badges127 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Plipus Tel Over a year ago

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. -)

Mojmir Over a year ago

This is accepted answer but better solution is here stackoverflow.com/questions/1144123/… 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.

martijnve · Accepted Answer · 2013-03-27 09:25:13Z

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, 2013 at 9:25

answered Mar 27, 2013 at 9:20

martijnve

9832 gold badges10 silver badges23 bronze badges

1 Comment

FelipeAls Over a year ago

+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)

Mathew Thompson · Accepted Answer · 2013-03-27 09:16:50Z

2

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

answered Mar 27, 2013 at 9:16

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Comments

bipen · Accepted Answer · 2013-03-27 09:16:57Z

2

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

answered Mar 27, 2013 at 9:16

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

James · Accepted Answer · 2013-03-27 09:17:21Z

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, 2013 at 9:17

James

1,9563 gold badges22 silver badges39 bronze badges

Collectives™ on Stack Overflow

Hide Table Row Using CSS

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related