在HTML表中的行交替顏色不起作用

我已經創建了具有以下風格JSP，在HTML表中的行交替顏色不起作用

<style type="css/text"> 
tr.color1{background-color:#00FCFF;} 
tr.color2{background-color:#c1bfbb;} 
</style>

I型在JSP的屬性和渲染的表。由於我迭代了在JSP中建模的List，因此我必須爲交替的HTML表格行設置邏輯。

我已經使用JSTL和有下面的代碼：

<c:forEach items="${rSList}" var="rS" varStatus="rowCounter"> 
     <tr class="${rowCounter.index % 2 == 0 ? 'color2':'color1'}"> 
      <td style="padding-left: 4px;" > 
       <font face="verdana"><c:out value="${rS.NAME}" /></font> 
      </td> 

      <td style="padding-left: 4px;" > 
       <font face="verdana"><c:out value="${rS.AVAILABLE}" /></font> 
      </td> 

      <td style="padding-left: 4px;" > 
       <font face="verdana"><c:out value="${rS.OWNER}" /></font> 
      </td>

我用Firebug，發現確實類得到交替爲：

<tr class="color2"> 
<!- td data gets displayed here without color2 background--> 

<tr class="color1"> 
<!- td data gets displayed here without color1 background--> 

<tr class="color2"> 
<tr class="color1"> 
<tr class="color2">

這意味着類是越來越挑，但背景顏色不會改變。感謝任何幫助。

來源

2013-08-22 user2339071

你正在做應該工作作爲沒有什麼是錯的，它可以與特異性好比說你用的是class，但其他一些規則是更具體的像

#demo table tr { 
    background: #fff; 
}

Demo的方式失敗（特異性事項）

所以在上面的例子中，雖然類應用，tr應採取的背景下，它不會佔用你必須之前聲明更具體的規則，或者可以說你正在使用!important。您可以檢查元素並查看從哪個選擇器/規則中應用了什麼顏色。

此外，如果您想您的標記保存到一個很大的程度上，你可以簡單地使用下面的CSS，這將適用於你的表的奇數行和偶數行，不宣類，像

table tr:nth-child(odd) { 
    background: #f00; 
} 

table tr:nth-child(even) { 
    background: #000; 
}

Demo

來源

2013-08-22 06:35:40

Thanks @Mr。外國人。真的很感謝你的幫助第二個解決方案做到了。我不知道我的方法有什麼問題。這是否意味着使用'nnth'子元素聲明CSS將覆蓋由外層CSS應用於該表的任何規則..？ – user2339071

@ user2339071比確定這是特定性問題，如果你想學習，只是谷歌了，CSS特異性，並不意味着它會覆蓋，如果你使用'：nth'，這只是你正在使用的規則是更具體的，關於'odd'和'even'，這在使用表格時得到真正的方便，同時也確保你使用類，因爲我給你的選擇器將適用於所有表格，我希望你知道這一點:) –

是的，我知道。：P ..此外，我不介意給我所有的桌子備用的感覺。：D .. +1爲解決方案和指導。謝謝。 :) – user2339071

在HTML表中的行交替顏色不起作用

回答

相關問題