1

I am using this css code to change every odd/even tr bg color

tbody tr:nth-child(odd){background-color: #b2b2b2;}
tbody tr:nth-child(even){background-color:black;}

But i am filtering table data and based on conditions some TR will be hidden. so if style="display: none;" then apply odd/even rules only for visible TR only. Otherwise it look like attached image

enter image description here

Yogesh Saroya
  • 1,401
  • 5
  • 23
  • 52
  • `nth-child` does not care about `display:none`, these elements still count as children. You need a different solution that takes the hidden state of the table rows into account, likely dynamically (so, JavaScript.) – CBroe Dec 08 '20 at 14:50
  • 1
    Btw, did you try and research this before asking? https://stackoverflow.com/questions/26057925/select-odd-even-child-excluding-the-hidden-child, https://stackoverflow.com/questions/15059388/css3-odd-and-even-only-visible-rows, https://stackoverflow.com/questions/34432967/css-how-to-skip-hidden-child-in-nth-childodd-and-nth-childeven … anything but a new question. – CBroe Dec 08 '20 at 14:51
  • Javascript is the way. You will have to add and remove classes based on the index of the visible TRs. – Aristeidis Karavas Dec 08 '20 at 14:52
  • can you add a class like "hidden" and add the display: none via that class instead of adding the display: none? If it is possible then I think you can use the hidden class in your selector to do this – Zsolt Balogh Dec 08 '20 at 14:53
  • @ZsoltBalogh no, you can not, see https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector – CBroe Dec 08 '20 at 15:01

1 Answers1

0

Just add to tr class "disabled" {display: none;}

And add to your css:

tbody tr:nth-child(even):not(.disabled){background-color:black;}

Vlad Brezitskiy
  • 34
  • 3
  • No, it _does not_ work like that. https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector – CBroe Dec 08 '20 at 15:01