css - 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>