tbody tr:nth-child(odd) basically you select every odd numbered tr of tbody something like tbody ->tr(selected) ->tr ->tr(selected) so it doesn’t matter how many rows the table has it will always have one colored row and one white row after that.
Just wanted to say thanks for all of the cool tips and tricks. I’ve used the css zebra stripe trick before but it hadn’t occurred to me to prefix my css with tbody so that I could better target hovers and such.
In response to being able to use jQuery it also adds a lot of classes, (if its scaled up and there’s hundreds of rows) it would add a lot of classes. and in turn couldn’t that eventually create bloat code or even slow down the page? (not a lot but a little) and so i guess chris just wanted to use the most efficient way of using the code, or maybe just first one that came to mind or just preference. Just a thought :)
I added quantity queries to the mix, so zebra stripes kick in only if a table has more than a certain number of rows: https://codepen.io/cadars/pen/PoKrdjp
great certainly saved me some time searching
this didn’t work well for me, but the PHP one worked great.
CSS3 zebra striping is better solution! Why? Here is the right concept:
1. PHP generates html as output, which should not care how the elements looks like.
2. CSS purpose is to “care” how the elements looks like.
Or:
http://webbytedd.com/b/color-rows/
CSS3 may not work on IE9- or some legacy browsers.
Cant understand, how it works…
tbody tr:nth-child(odd)
basically you select every odd numbered tr of tbody
something like
tbody
->tr(selected)
->tr
->tr(selected)
so it doesn’t matter how many rows the table has it will always have one colored row and one white row after that.
@Dyllon and @Artem, here is a simple demo explaining how to use this code, and a live example of it being used.
http://webdesignandsuch.com/2010/08/add-zebra-striping-to-a-table-with-css3/
Sadly… not supported by IE
Sadly…you are using IE
Can be done with jQuery addClass.
Exactly: But it takes more lines of code.
shitty explorer not supported
I bet these people saying that it isn’t working are browsers that are not supported. :D
I meant, *using* browsers that are not supported.
Just wanted to say thanks for all of the cool tips and tricks. I’ve used the css zebra stripe trick before but it hadn’t occurred to me to prefix my css with tbody so that I could better target hovers and such.
How do you maintain a consistent zebra pattern in a sortable PHP table?
hey have u found an answer dor that in these 12 years?
This is awesome, sadly it’s not working in IE. Therefore I am using the PHP or jQuery way, until IE wakes up and shuts down that terrible browser.
I AM A VOICE FROM YOUR FUTURE it is now 2016 and it is still NOT shut down!
Great, thank you!
I want to use this but I have tables inside my table rows, does anyone know a way I can have it skip the nested rows/columns? Thanks!
I think it will not support internet explorer,
but it is useful.
In response to being able to use jQuery it also adds a lot of classes, (if its scaled up and there’s hundreds of rows) it would add a lot of classes. and in turn couldn’t that eventually create bloat code or even slow down the page? (not a lot but a little) and so i guess chris just wanted to use the most efficient way of using the code, or maybe just first one that came to mind or just preference. Just a thought :)
For my case this is perfect.
Thank you for such a succinct solution. :-)
Thank you ! it worked :))
I added quantity queries to the mix, so zebra stripes kick in only if a table has more than a certain number of rows: https://codepen.io/cadars/pen/PoKrdjp