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;
}
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]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With