Css – Interleave row/column colors in a GridView


Suppose you have a GridView with a few columns like:

| Foo | Bar | Total |

and you use a style sheet to make the alternating rows different colors, say light blue and white.

Is there a good way to make a particular column alternate in a different color? For example, I might want the Total column to alternate in medium and light red to bring attention to it in a large grid.

BTW, I know you can programmatically change the color of a cell. I'd like to stick to CSS if it all possible, however, so all my style stuff is in one place. I also don't see an easy way to tell if I'm in an alternating row when I'm inside the event handler.

Best Solution

If you're using jQuery, you can do it pretty easily.

$("table#myTable col:odd").css("background-color:#ffe");

the :odd selector is not available in most current browsers, but jQuery gives it to us today.

For rows, you can do it with the built-in AlternatingRowStyle element.

Edit: found a good resource for some different ways of doing this: http://css-discuss.incutio.com/?page=StylingColumns

Related Question