Don't :Hover Me, Bro!

[MarkHiatt]

So, I'm Zebra-striping an output table ( http://www1.unl.edu/wdn/wiki_files/inde ... ntable=yes ) and I notice that the table row I am using as a header also displays the :hover behavior ( #table_id tr:hover td {background-color:#FFFFC7 !important;} ). Maybe this isn't much of a problem and I can live with it because people aren't going to be spending a lot of time hovering over the heading. But, I think, the rest of the page is technically perfect. No errors. No warnings. Wouldn't it be nice if I could quiet the :hover effect for just that one row?

I have tried adding a class to subsequent output rows and changing the CSS. That breaks the zebra stripe. I have tried marking up that row as a <TH>. That broke the zebra stripe, too. I tried reworking things for <THEAD> and <TBODY> to no avail. The only thing I have found that works is to break the heading off into its own table, but then the various column headers don't line up well across browsers.

Anyone have any idea how to get the zebra-stripe to play with markup that causes the :hover behavior to skip the first row?

[bbieber2]

Hey Mark,

I think the key is to just add tbody to the CSS selector, so that only rows in the body get the hover applied to them.

#table_id tbody tr:hover td {background-color:#FFFFC7 !important;}

Here's a working example:
http://ucommbieber.unl.edu/zebra.php