问题Zebra条带化表格中的单个列

Question

我一直在尝试斑马条纹在我桌子的第一列，但我没有成功。我一直在尝试下面这样的事情，但这似乎突出了所有这些。

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

有人可以协助吗？

这是相关代码的plnkr。

Answer 1

您可以使用ng-class指令。

将ng-class="{even: $even, odd: $odd}"添加到您的表格行（<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。