Question

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: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 10px;
    #margin: 45px;
    width:100%;
    text-align: left;
    border-collapse: collapse;  
}

Answer 1

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]