Zebra 对 table 中的单个列进行条带化时出现问题

Question

我一直在尝试在 table 的第一列中添加斑马条纹，但一直没有成功。我一直在尝试下面的事情，但似乎突出了它们。

tr:nth-of-type(odd) td:nth-of-type(1) {
    background-color: #999999;
}

有人可以帮忙吗？

这是相关代码的 plnkr。

Answer 1

您可以使用 ng-class 指令。

将 ng-class="{even: $even, odd: $odd}" 添加到您的 table 行 (<tr />)，然后像这样更新您的 CSS :

tr.odd td:nth-of-type(1) {
    background-color: #ccc;
}

您的转发器应如下所示：

<tr class="tt" ng-class="{even: $even, odd: $odd}" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty">
   <td class="shrink"><b>{{x.a}}</b></td>
   <td class="shrink">{{x.b}}</td>
   <td class="shrink"><u>{{x.c}}</u></td>
   <td class="shrink">{{x.d}}</td>
   <td class="shrink">{{x.e}}</td>
   <td class="shrink">{{x.f}}</td>
</tr>

这是a working plunk。

Zebra 对 table 中的单个列进行条带化时出现问题

Problems Zebra Striping a single column in a table

html

css

html-table