Hiding table data using <div style="display:none">

Question

So, I've hidden whole tables like this, which works fine:

<div style="display:none"> <table> <tr><th>Test Table</th><tr> <tr><td>123456789</td><tr> <tr><td>123456789</td><tr> <tr><td>123456789</td><tr> </table> </div> 

But I want to hide just a group of rows like this:

<table> <tr><th>Test Table</th><tr> <div style="display:none"> <tr><td>123456789</td><tr> <tr><td>123456789</td><tr> <tr><td>123456789</td><tr> </div> </table> 

But that doesn't work. Any hints?

Answer 1

Just apply the style attribute to the tr tag. In the case of multiple tr tags, you will have to apply the style to each element, or wrap them in a tbody tag:

<table>   <tr><th>Test Table</th><tr>   <tbody style="display:none">     <tr><td>123456789</td><tr>     <tr><td>123456789</td><tr>     <tr><td>123456789</td><tr>   </tbody> </table> 

Answer 2

Unfortuantely, as div elements can't be direct descendants of table elements, the way I know to do this is to apply the CSS rules you want to each tr element that you want to apply it to.

<table> <tr><th>Test Table</th><tr> <tr><td>123456789</td><tr> <tr style="display: none; other-property: value;"><td>123456789</td><tr> <tr style="display: none; other-property: value;"><td>123456789</td><tr> <tr><td>123456789</td><tr> <tr><td>123456789</td><tr> </table> 

If you have more than one CSS rule to apply to the rows in question, give the applicable rows a class instead and offload the rules to external CSS.

<table> <tr><th>Test Table</th><tr> <tr><td>123456789</td><tr> <tr class="something"><td>123456789</td><tr> <tr class="something"><td>123456789</td><tr> <tr><td>123456789</td><tr> <tr><td>123456789</td><tr> </table>