我有一个动态表,通常看起来像这样

-------------------------------------------------- -
| AA | BB | CC |
-------------------------------------------------- -
| X1 | X2 | X3 | Y1 | Y2 | Z1 | Z2 | Z3 |
-------------------------------------------------- -
| xx | xx | xx | yy | yy | zz | zz | zz |
-------------------------------------------------- -
| xx | xx | xx | yy | yy | zz | zz | zz |
-------------------------------------------------- -


我想为AA,BB,CC等使用不同的颜色-通常是其他颜色(斑马条纹)。
我不想仅针对AA单元,而是针对所有属于AA单元的列。它下面的所有<td>

我不能使用:nth-​​child(odd)作为目标,因为它将选择奇数子列而不是<th>元素的奇数列及其子元素。

请注意,子列的数量不是固定的。可以是一,二,三或更多。

有什么办法可以实现?

最佳答案

我看到两个CSS选项具有一些流畅性。

1)(笨拙而棘手的)仅是一种颜色,您可以在下面重复一个框阴影。 http://codepen.io/anon/pen/ysLvE


th:nth-child(even) {
  background:yellow;
  box-shadow:
    0 1em  0  yellow,
    0 3em  0  yellow,
 /* and so on as much as needed , here Sass or alike is your friend */
    0 29em 0  yellow
}


这里是Sass / scss版本:http://codepen.io/gc-nomade/pen/xqALu

2)(比较聪明),您可以插入带有背景图像http://codepen.io/anon/pen/EgCJp的伪元素


th:after {
  content:'';
  display:block;
  height:3000px;/* what you think long enough */
  margin-bottom:-3000px; /* negative margin to reduce height virtually to zero */
  background:yellow url(http://lorempixel.com/600/800/nature/1) center;
}


如果这些方法不适合您使用CSS的方式,那么javascript将是您的救星:)。
++

10-05 21:00
查看更多