Shawn Weisfeld

I find when I talk to myself nobody listens. - Shawn Weisfeld
posts - 365, comments - 174, trackbacks - 34

My Links

News


Shawn Weisfeld's Facebook profile

The views expressed in this blog are mine and mine alone, not that of my employer, Microsoft, or anyone else’s. No warrantee is given for the quality of any material on this site.

Archives

Post Categories

Zebra Strip a jqGrid

 

Zebra striping, or greenbar, or odd/even row highlighting whatever you call it, your boss asked you for it and now you are here and you are trying to figure out how to implement it. When I was attempting to do this I saw many examples using javascript to do this, however why do in javascript what you can do in CSS.

If you look for a solution for a standard html table (of which there are millions on the web) they will tell you to do something like this:
    #grdResults tr:nth-child(even) {
            background-color:rgb(226, 228, 240);
        }

While this works great for normal tables for a jqGrid it will not work. Why because the cells themselves are overriding your command. Easy enough to solve, just color the background of each cell. (note the td at the end of the first line)
        #grdResults tr:nth-child(even) td {
            background-color:rgb(226, 228, 240);
        }

Wammo! A zebra striped jqGrid with no additional javascript overhead.

Print | posted on Wednesday, January 23, 2013 9:05 PM |

Feedback

No comments posted yet.

Post Comment

Title  
Name  
Email
Url
Comment   
Please add 1 and 5 and type the answer here:

Powered by: