我有一个动态表,通常看起来像这样
-------------------------------------------------- -
| 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将是您的救星:)。
++