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将成为您的救星:)。 ++

Answer 2

纯css是可能的，虽然需要css3并且它不是很漂亮：

TABLE > TH > TD:nth-child(1),
TABLE > TR > TD:nth-child(1),
TABLE > TR > TD:nth-child(2),
TABLE > TR > TD:nth-child(3) {
    background-color: red;
}

第二，第三，列的方式相同。

如果你能为所需的td-s提供一个通用的类名（f.e。“redColumn”和“greenColumn”），可能会更好一点。在这种情况下简单

.redColumn {
    background-color: red;
}

.greenColumn {
    background-color: green;
}

没问题。

如何针对那些陷入困境的人？

2 个答案: