Skip to main content
R
revdave
Inspiring
April 12, 2019
Answered

simple row hiding

  • April 12, 2019
  • 4 replies
  • 6748 views

Hi all,

I have  a basic html table several rows.

I would like to hide row 2.

so i made a css style like:

<style type="text/css">

.hiderow {

  visibility: collapse;

// also tried  display: none

}

</style>

then on row2 i set like:

<tr class="hiderow">

      <td>test/td>

      <td>test</td>

    </tr>

problem is it doesn't work. Any ideas how to get it to work? Also in all browsers?

Thanks much for your help

Dave

This topic has been closed for replies.
Correct answer BenPleysier

The default display value for the <tr> element is table-row as in

display: table-row;

It would therefore be logical to use none to alter the display value as in

display: none;

For more on default values, see CSS Default Browser Values for HTML Elements

visibility: collapse; for table row seems to have an erratic behaviour in the different browsers and I would not use it at all.

Edit: I notice that you have used display: none; without success. You may need to use the !important value to override the default value as in

display: none !important;

4 replies

Liam Dilley
Liam Dilley
Inspiring
August 7, 2019

Late on this one but hopefully it helps anyone coming across this.


Firstly, you do not need to add a class to target the rows you want

tr:nth-child(2) {
  background-color: green;
}

This will target every 2nd tr in a table. You can do alternates as well with "odd" and "even" instead of the 2 as well. Then you do not have to worry about how you get the class on the table.

Next up is !important. You want to avoid using this. If you are using this it means you either have an inheritance and overide problem you are avoiding fixing or a lazy fix really. It should only be needed if your CMS forces inline style or parent stylesheets you can not control or addressing older browser issues.

Next is hiding it. display:none; will work if there is nothing overriding it and inspecting the browser console and the CSS side of it should help identify that. You can also use css visibility:hidden; which keeps the element in the render but not visible.

ankitasara
ankitasara
Participant
April 22, 2019

Hey its working for me in google crome. Check the code.

</html>  

<head>

   <style type="text/css">

    .hiderow {

      visibility: collapse;

    // also tried  display: none

    }

     </style>

</head>

<body>

     <table>

     <tr>

     <td>aem</td>

     </tr>

      <tr class="hiderow">

     <td>test</td>

     <td>test</td>

     </tr>

     </table>

</body>

</html>

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
April 12, 2019

"display:none" should do the trick without much fanfare.

If "display:none !important" works for you when "display:none" doesn't, bring your page into a browser and inspect the rows. There will be a rule somewhere else in your css that needs adjusting so you can target the rows without needing !important.

R
revdaveAuthor
Inspiring
April 12, 2019

Thanks much Ben & Jon for the info.

Good to know that visibility: collapse is not reliable.

it turns out that I found a typo on this complex page that was messing things up and now display:none seems to be working

Thanks again

Dave

sinious
sinious
Legend
April 12, 2019

I'm with Fritz. If you ever find yourself needing to use !important then either something isn't correct, is getting injected inline or you just structured it wrong. It should be avoided.

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
April 12, 2019

The default display value for the <tr> element is table-row as in

display: table-row;

It would therefore be logical to use none to alter the display value as in

display: none;

For more on default values, see CSS Default Browser Values for HTML Elements

visibility: collapse; for table row seems to have an erratic behaviour in the different browsers and I would not use it at all.

Edit: I notice that you have used display: none; without success. You may need to use the !important value to override the default value as in

display: none !important;

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices