用於表格標題的CSS，甚至奇數行？

我的表結構如下所示：用於表格標題的CSS，甚至奇數行？

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

我已經定義了下面的CSS，如何申請「導航」，「頭」，「偶」，「奇」類在我的CSS？如何定義它們與'table.even'，'table.odd'等'table'類有關？感謝

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

來源

2010-01-22 Ashika Umanga Umagiliya

您的HTML中存在一些錯誤，例如同一個表中的額外''和兩個''元素。在你的CSS中還有一個隨機＃。我猜這些只是複製粘貼錯誤。 ;） – 2010-01-22 06:10:37

僅供參考父元素的類或父元素本身，如果你要使用的類名超過一個類型的元素。例如，這樣的：

.navigation { font-weight:bold }

...而不是這樣的：

tr.navigation { font-weight:bold }

它將當瀏覽器呈現頁面削減加載時間。

參考：Optimize browser rendering [谷歌代碼]

來源

2010-01-22 06:08:15 jay

爲了未來的可維護性，至少對錶格進行分類並使用少許繼承是一個好主意，除非你是100％，否則這是一個全球性的類。 – jhogendorn 2010-01-25 05:04:42

應用類的任何元素可以讓你做到以下幾點：

element.className { rules }

與 TR

所以，你可以做到以下幾點：

tr.navigation { font-weight:bold }

所以創建斑馬對你的賠率和事件行的條紋可以這樣做：

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

來源

2010-01-22 06:05:27 Sampson

你會使用

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

來源

2010-01-22 06:06:19 jhogendorn

@devians，根據我的回答，這是完全沒有效率的。您最好爲表格行使用.navigation，並且如果必須在不同的元素上定義不同的樣式，請使用不同的類名稱。 – jay 2010-01-22 06:13:35

更簡單，不需要類：

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

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

我希望幫助！

來源

2013-06-12 18:12:56

用於表格標題的CSS，甚至奇數行？

回答

相關問題