具有内联样式CSS的表上的备用行颜色

Question

我想交替使用表格的背景颜色以增加可读性.谷歌搜索后,我找到了我需要的代码.

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

在我的解决方案中的问题,我没有访问head标签,我想用内联样式CSS实现它,但它不起作用.

<tr style="nth-child(even) background-color: #000000;">

想法？

Answer 1

内联样式是每个元素,因此您必须将适当的样式注入到style每个其他tr元素的属性中.如果您尚未动态生成这些行,并且无法使用JavaScript注入这些样式,那么您将不得不在每个tr元素上手动应用该属性.

Answer 2

我也有类似的情况。我通过在表格前放置一个样式部分来解决它：

<style>
    table#some_table_id tr:nth-child(even) { background-color:#dddddd; }
</style>
<table id="some_table_id">
    <!-- table markup removed -->
</table>

不是最优雅的解决方案，但它对我有效（在Google Chrome 29.0.x中）。