tr背景更改與n-child更改thead和tfoot以及

Question

我想在我的表中添加tr s的不同顏色。

我正在嘗試使用nth-child(odd)和nth-child(even)，但我的thead和tfoot中的顏色也會發生變化。

請幫忙。

Answer 1

最好的大概是明確添加tbody到您的結構，例如：

tbody tr:nth-child(odd) { background-color: pink; } 
 
tbody tr:nth-child(even) { background-color: lime; }

<table> 
 
    <thead><tr><th>Header</th></tr></thead> 
 
    <tbody> 
 
    <tr><td>row 1</td></tr> 
 
    <tr><td>row 2</td></tr> 
 
    <tr><td>row 3</td></tr> 
 
    <tr><td>row 4</td></tr> 
 
    </tbody> 
 
    <tfoot><tr><td>Footer</td></tr></tfoot> 
 
</table>

注意，CSS will work在現代瀏覽器甚至如果忽略在HTML中tbody（至少在這種情況下，瀏覽器「假定」tbody存在並因此選擇在該主體中的行） 。

tbody tr:nth-child(...){ 
    ... 
} 

Answer 2

通過指定tr s表示AR僅在表中的主體風格排除thead和tfoot

thead, tfoot{background-color:transparent !important;}

Answer 3

使用您正在使用thead相同的代碼和tfoot，你可以這樣寫：