CSS cho tiêu đề Bảng, thậm chí hàng lẻ?

Question

cấu trúc bảng của tôi là như sau:

<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> 

tôi đã xác định sau CSS, làm thế nào có thể áp dụng "chuyển hướng", "tiêu đề", "thậm chí", "lẻ" lớp học trong CSS của tôi? Cách xác định chúng liên quan đến lớp 'bảng' như 'table.even', 'table.odd'? nhờ

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

Chỉ tham khảo lớp các yếu tố của cha mẹ hoặc các yếu tố phụ huynh chính nó nếu bạn phải sử dụng tên lớp cho nhiều hơn một loại phần tử. Ví dụ, điều này:

.navigation { font-weight:bold } 

... thay vì điều này:

tr.navigation { font-weight:bold } 

Nó sẽ cắt giảm thời gian tải khi trình duyệt làm cho trang.

tham khảo: Optimize browser rendering [Google Code]

Answer 2

Áp dụng một lớp học để bất kỳ yếu tố cho phép bạn làm như sau:

element.className { rules } 

Vì vậy, với TR của bạn, bạn có thể làm như sau:

tr.navigation { font-weight:bold } 

Vì vậy, việc tạo ra ngựa vằn -chi tiết về tỷ lệ cược và hàng sự kiện của bạn có thể được thực hiện như sau:

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

Answer 3

bạn sẽ sử dụng

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

Answer 4

More đơn giản và không cần lớp:

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

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

Tôi hy vọng sự giúp đỡ!