Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS for Table headers,even odd rows?

Tags:

html

css

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;  
}
like image 741
Ashika Umanga Umagiliya Avatar asked Jan 22 '10 06:01

Ashika Umanga Umagiliya


2 Answers

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!

like image 59
Gabriel Glauber Avatar answered Oct 01 '22 21:10

Gabriel Glauber


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]

like image 38
jay Avatar answered Oct 01 '22 21:10

jay