CSS for table headers, even odd rows?

Question

My table structure is as 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 the following CSS, how to apply the classes "navigation", "header", "even", "odd" in my CSS? How to define them, belong to the class "table", for example, "table.even", "table.odd"? thanks

table{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 10px;
    #margin: 45px;
    width:100%;
    text-align: left;
    border-collapse: collapse;  
}

Answer 1

Pay attention only to the class of the parent element or to the parent element itself if you need to use the class name for several types of elements. For example, this:

.navigation { font-weight:bold }

... instead of this:

tr.navigation { font-weight:bold }

It will reduce loading time when the browser displays the page.

: [ Google]

Answer 2

:

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

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

, !

Answer 3

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

Answer 4

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

element.className { rules }

So with help TRyou can do the following:

tr.navigation { font-weight:bold }

Thus, creating zebra stripes on your chances and event lines can be done as follows:

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