第一行不同颜色的交替表行颜色

我想制作一个表格，其中标题是绿色，然后行之间交替不同的样式。第一行不同颜色的交替表行颜色

我如何设计第一行的颜色以及让其他人交替？

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

第一行不同颜色的交替表行颜色

回答

相关问题