CSS for Table headers,even odd rows?

My Table structure is like follows:

<table>
 <thead>
   <tr class="navigation">
   </tr>
 </thead>
 <thead>
   <tr class="headers">
   </tr>
 </thead>
 <tbody>
  <tr class="even">
    <td><a href="#"/></td>
  </tr>
  <tr class="odd">
  </tr>
  </tr>
 </tbody>
</table>

I have defined following CSS ,how can apply "navigation","header","even","odd" classes in my CSS? How to define them relate to 'table' class like 'table.even','table.odd' ? thanks

table{
    font-family: "Luc开发者_StackOverflow中文版ida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 10px;
    #margin: 45px;
    width:100%;
    text-align: left;
    border-collapse: collapse;  
}

More simple and dont need class:

tbody tr:nth-child(odd) {
    put your style here...
}

tbody tr:nth-child(even) {
    put your style here...
}

I hope help!

Only reference the parent element's class or the parent element itself if you have to use the class name for more than one type of element. For example, this:

.navigation { font-weight:bold }

...instead of this:

tr.navigation { font-weight:bold }

It will cut down on load time when the browser renders the page.

Reference: Optimize browser rendering [Google Code]

Applying a class to any element allows you to do the following:

element.className { rules }

So with your TR, you could do the following:

tr.navigation { font-weight:bold }

So creating zebra-stripes on your odds and event rows can be done like this:

tr.odd  { background-color:#FFF; }
tr.even { background-color:#CCC; }

you would use

table thead tr.navigation {}
table thead tr.headers {}
table tbody tr.even {}
table tbody tr.odd {}