• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

simple row hiding

Contributor ,
Apr 11, 2019 Apr 11, 2019

Copy link to clipboard

Copied

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

Views

4.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 11, 2019 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 de

...

Votes

Translate

Translate
Community Expert ,
Apr 11, 2019 Apr 11, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 12, 2019 Apr 12, 2019

Copy link to clipboard

Copied

"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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 12, 2019 Apr 12, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 12, 2019 Apr 12, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 18, 2019 Apr 18, 2019

Copy link to clipboard

Copied

Thanks sinious for your input.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2019 Apr 18, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 22, 2019 Apr 22, 2019

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 06, 2019 Aug 06, 2019

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines