html - 带有另一个表的表列

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}