第一行不同顏色的交替錶行顏色

我想製作一個表格，其中標題是綠色，然後行之間交替不同的樣式。第一行不同顏色的交替錶行顏色

我如何設計第一行的顏色以及讓其他人交替？

我的HTML：

<table style="width: 100%;" class="butikHeader"> 
     <tr> 
      <td>Tilføj</td> 
      <td>Stk</td> 
      <td>Produkt navn</td> 
      <td>Pris</td> 
      <td>Mere info</td> 
     </tr> 
     <asp:Repeater ID="RepeaterList" runat="server"> 
      <ItemTemplate> 
       <tr> 
        <td> 
         <input id="CheckboxValue" type="checkbox" style="width: 20px;" /> 
        </td> 
        <td> 
         <input id="Text1" type="text" style="width: 50px;" class="AntalBoxInput" value="<%# Eval("Antal") %>" /> 
        </td> 
        <td><%# Eval("navn") %></td> 
        <td><%# Eval("pris") %> Kr,-</td> 
        <td><a href="produkt.aspx?id=<%# Eval("id") %>">Info</a></td> 
       </tr> 
      </ItemTemplate> 
     </asp:Repeater> 
    </table>

我的CSS：

.butikHeader tr:first-child { 
    background:#8AB512; 
    color:#FFF; 
} 
.butikHeader tr:nth-child(even) { 
    background:#FFF; 
    border:0px; 
    color:#000; 
} 
.butikHeader tr:nth-child(odd) { 
    background:#DFE7C0; 
}

我想使它看起來像像this或this

來源

2015-09-03 Nick Willumsen

只需在每個表格行中設置所需的類，如等。 – user2867342

你只需要放置first-child規則後其餘的，所以它壓倒了他們。

.butikHeader tr:nth-child(even) { 
    background:#FFF; 
    border:0px; 
    color:#000; 
} 
.butikHeader tr:nth-child(odd) { 
    background:#DFE7C0; 
} 
.butikHeader tr:first-child { 
    background:#8AB512; 
    color:#FFF; 
}

來源

2015-09-03 14:42:34 bumpy

它在兩個介於兩者之間的小Meldrum，它可以踢什麼？我用'border'並且不起作用 –

嘗試在表格中添加'border-spacing：0;'CSS – bumpy

感謝您的幫助！ :) –

使用thead和tbody

thead tr { 
 
    background:#8AB512; 
 
    color:#FFF; 
 
} 
 

 
tbody tr:nth-child(even) { 
 
    background:#FFF; 
 
    border:0px; 
 
    color:#000; 
 
} 
 

 
tbody tr:nth-child(odd) { 
 
    background:#DFE7C0; 
 
}

<table> 
 
<thead> 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>Sum</td> 
 
    <td>$180</td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td>January</td> 
 
    <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
    <td>February</td> 
 
    <td>$80</td> 
 
    </tr> 
 
</tbody> 
 
</table>

來源

2015-09-03 14:42:57

Errrm你的代碼的所有作品。我猜想你的示例代碼中沒有的東西正在影響它。

嘗試增加每個CSS語句如後重要：

.butikHeader tr:nth-child(odd) { 
    background:#DFE7C0 !important; 
}

爲了檢驗這一理論。我一般不喜歡使用！重要，但這是另一回事。

此外，我建議你將頂部行分割成一個thead元素和隨後的一行到一個tbody語句中，但我再次猜測，這是另一個故事。

來源

2015-09-03 14:47:53 thab

第一行不同顏色的交替錶行顏色

回答

相關問題