Menu
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?
732
You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <table> element is not visible, but it maintains its position on the page. Removing the hidden attribute makes it re-appear.
Usually, to hide an element from view, you use the 'display' property and set it to 'none'. But CSS also has a property called 'visibility', which hides elements in a different way. In particular, we use 'visibility: collapse' here, which is designed especially for hiding table columns and rows.
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”. document. getElementById("element").
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> 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
