Question

我想创建一个表格，其中标题为绿色，然后行在不同的样式之间交替。

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

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

Answer 1

您必须在其余部分之后放置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;
}

Answer 2

使用thead和tbody

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

Errrm你的代码一切正常。我猜你的示例代码中没有的东西正在影响它。

尝试在每个css语句后添加！important，例如：

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

测试理论。我不喜欢使用！一般来说很重要，但这是另一个故事。

另外我建议你将你的顶行分成一个thead元素，然后将其分成一个tbody语句，但我想再说一次，这是另一个故事。

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

3 个答案: