html - 如何使用 colspan 定位属于 的 ？

Question

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

----------------------------------------------------|       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> 的奇数列。元素及其子元素。

请注意，子列的数量不是固定的。它可以是一个、两个、三个或更多。

有什么办法可以实现吗？

Answer 1

我看到两个 CSS 选项可以让一些流畅的东西。

1) (笨拙和棘手)只是一种颜色，你可以在 th 下重复一个框阴影。 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 将成为您的救星:)。++