simple row hiding

Report · Apr 11, 2019

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

Report · Apr 11, 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, the only real Dreamweaver alternative.

Report · Apr 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.

Report · Apr 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

Report · Apr 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.

Report · Apr 18, 2019

Thanks sinious for your input.

Report · Apr 18, 2019

For more on !important CSS have a look at https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

Wappler, the only real Dreamweaver alternative.

Report · Apr 22, 2019

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

</html>

<head>

.hiderow {

visibility: collapse;

// also tried display: none

}

</style>

</head>

<body>

<table>

<tr>

</tr>

</tr>

</table>

</body>

</html>

Report · Aug 06, 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.

simple row hiding

1 Correct answer