Question

大家好，这里有一点设计问题。

我有这个包含此表的转发器

<table class="Library">              
    <tr>
        <td style="width: 170px; padding-left: 30px; height: 50px;"><%#RemoveTimeInDate(Eval("ValidTo").ToString())%></td>
        <td style="width: 449px; height: 50px;"><a style="color: black" href="Info.aspx?id=<%# Eval("Id") %>"> <%# Eval("Title") %></a></td>
        <td style="width: 2px; padding-left: 3px; height: 50px;">></td>
    </tr>
</table>

CSS：

 .Library {
     font-size: 12px;
 }
 .Library a {
     color: #007583;
 }
 .Library a:visited {
     color: #007583;
 }
 .Library tr:nth-child(Odd) {
     background-color: #FFFFCC;
 }

为了让这个工作起作用，我要为行颜色添加另一个表格来改变。当转发器中只有1时，有一种方法可以添加不同的行颜色

Answer 1

如果表格中只有一行，则可以使用:only-child css selector设置样式。

你也可以像我在example on Codepen中那样结合使用：only-child和：nth-child来设置两个表只有一行和多行表的样式，即使是不同颜色的表也是如此多行情况下的第一行和单行情况下的唯一行。这是相关的CSS：

.Library tr:nth-child(Odd) {
    background-color: #FFFFCC;
}
.Library tr:nth-child(Even) {
    background-color: #CCFFFF;
}
.Library tr:only-child {
    background-color: #CCFFFF;
}

请注意：only-child选择器必须位于：nth-child（Odd）之后，在具有单行的表的情况下优先于它。

Answer 2

我不完全得到你需要的东西但是你可以使用：nth-child（偶数）从第一行开始着色。

here is the w3 example of even odd nth child

将行颜色添加到转发器中的奇数行

2 个答案: