表列与另一个表

Question

我必须制作一个带有另一个表的列的表，但我希望每个交替行的颜色不同。图片如下:(再次忽略字符列）

请在下面找到angularJS样本表代码:(列表可以有任意数量的元素，即偶数或奇数）

<table style="border: 1px solid;">
<thead>
  <th>Character</th>
  <th>Name</th>
  <th>CharacterAgain</th>
</thead>
<tbody>
           <tr ng-repeat="actor in AAA.cast">
            <td>{{actor.character}}</td>
<td>
  <table>
   <tr ng-repeat="actor1 in AAA.cast"> // could be some another list
      <td>
     {{actor.name}}
     </td>

   </tr>
  </table>
</td>
</tr>
</tbody>
</table>

我尝试了很多替代方案来通过脚本分配CSS类，但是在一个或其他情况下它们都失败了。如果有人能给我工作jsFiddle，我会非常感激。如果CSS可以做到这一点，请告诉我。

Answer 1

它非常简单，在你的css文件中添加

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

示例：http://jsfiddle.net/x8vxhuhk/

如果你需要确保这只发生在内部表上，你可以在整个表中添加一个类，即

HTML：

<table class='striped'>

CSS：

.striped tr:nth-child(even) {background: #CCC}
.striped tr:nth-child(odd) {background: #FFF}

或者如果你没有办法改变那些有点像笨蛋的类：

CSS：

table table tr:nth-child(even) {background: #CCC}
table table tr:nth-child(odd) {background: #FFF}

支持非常好，唯一的问题是IE8 http://caniuse.com/#feat=css-sel3

修改

所以，你可以这样做：

/* Outer table */
table tr:nth-child(even) {background: #FFF}
table tr:nth-child(odd) {background: #CCC}
/* Inner table */
table table tr:nth-child(even) {background: #CCC}
table table tr:nth-child(odd) {background: #FFF}

Answer 2

您可以使用nth-of-type选择器：

.tr{
   background: blue;
}

.tr:nth-of-type(odd){
   background: black; 
}