与第一行交替排列的行颜色不同 [英] Alternating table row color with the first row a different color

问题描述

我想创建一个表格，标题是绿色的，然后是不同样式之间的行。

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

我的HTML：

 < table style =宽度：100％;类= butikHeader > 
< tr> 
< td>Tilføj< / td> 
< td> Stk< / td> 
< td>产品navn< / td> 
< td> Pris< / td> 
< td>仅限信息< / td> 
< / tr> 
< asp：Repeater ID =RepeaterListrunat =server> 
< ItemTemplate> 
< tr> 
< td> 
< input id =CheckboxValuetype =checkboxstyle =width：20px; /> 
< / td> 
< td> 
< input id =Text1type =textstyle =width：50px; class =AntalBoxInputvalue =<％＃Eval（Antal）％> /> 
< / td> 
< td><％＃Eval（navn）％>< / td> 
< td><％＃Eval（pris）％>氪， - < / TD> 
< td>< a href =produkt.aspx？id =<％＃Eval（id）％>> Info< / a>< / td> 
< / tr> 
< / ItemTemplate> 
< / asp：中继器> 
< / table> 
  

我的CSS：

  .butikHeader tr：第一个孩子{
背景：＃8AB512; 
颜色：#FFF; 
} 
 .butikHeader tr：nth-​​child（偶数）{
 background：#FFF; 
 border：0px; 
颜色：＃000; 
} 
 .butikHeader tr：nth-​​child（奇数）{
背景：＃DFE7C0; 
} 
  

我想让它看起来像此或 this

解决方案

您只需将 first-child 规则，所以它会覆盖它们。

  .butikHeader tr：n -child（偶数）{
背景：#FFF; 
 border：0px; 
颜色：＃000; 
} 
 .butikHeader tr：nth-​​child（奇数）{
背景：＃DFE7C0; 
} 
 .butikHeader tr：第一个孩子{
背景：＃8AB512; 
颜色：#FFF; 
} 
  

I want to make a table where the header is green and then the rows alternate between different styles.

How can I style the first row's color as well as having the others alternate?

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

My 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;
}

I would like to make it look like something like this or this

解决方案

You just have to place the first-child rule after the rest, so it overrides them.

.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;
}

这篇关于与第一行交替排列的行颜色不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！