WestCoast_BC
asked on
How to display a table with alternating row colors when some rows are not visible
I have a table with rows that I hide and show using the jQuery functions show() and hide(). I have some css rules that display the table with alternating row colors by doing something similar to the following:
and something similar for the even rows.
My problem is that the style is applied to all rows even the hidden ones so as a result my table does not have alternating row colors when some of the rows are hidden. I have tried doing the following but that did not work:
I am hoping someone can help me with this
tr:nth-child(odd) {
color: #000000 ;
background-color: #F8F8F8 !important;
}
and something similar for the even rows.
My problem is that the style is applied to all rows even the hidden ones so as a result my table does not have alternating row colors when some of the rows are hidden. I have tried doing the following but that did not work:
]tr:visible:nth-child(odd) {
color: #000000 ;
background-color: #F8F8F8 !important;
I am hoping someone can help me with this
ASKER
Thanks. I would rather not have to rebuild the table each time the user chooses to show or hide a row.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
To realise this you can draw the complete Tabkle with JavaSCript.
I hope this helps.