Question

我试图为每个人提供备用背景颜色。我明白我可以使用：

tr:nth-child(even) {
    background-color: #000000;
}

正如another stack question says那样，只有在我们拥有相同数量的<td> s时才有效，但如果我们的数量不同，我们就不会有完整的彩色行但它会而是停在最后一个td。

我是否有办法只使用css或任何jQuery？

Answer 1

您可以为每一行分配一个类。如果你动态生成表，那应该很简单。

<style>
    .rowOdd { background: #C0C0C0; }
    .rowEven { background: #CACACA; }
</style>

<table>
    <tr class="rowOdd">
    (...)
    </tr>
    <tr class="rowEven">      
    (...)
    </tr>
 </table>

等......或者如果您的布局非常复杂（许多合并的单元格），那么您可以单独为每个td添加类似的类而不是tr。

Answer 2

我肯定会采用CSS3方法。

这个网站非常擅长解释所有可用的第n个子语法

http://nthmaster.com

Answer 3

您可以使用奇数/偶数分别操作每一行。我认为你需要一个真实的演示来更好地理解。

Live Demo

tr:nth-child(even)
{
    background: red;
}         
tr:nth-child(odd)
{
    background: yellow;
}

Answer 4

您可以将tr:nth-child(2n+1)用于奇数，或将tr:nth-child(2n+1)用于普通css。

tr:nth-child(2n+1) > td
{
background-color:#F5F5F5
}

TR交替背景颜色，TD数不等

4 个答案: