Html 是否可以在CSS中突出显示colspan列的一部分？

我有一个HTML表，看起来像这样：

我已经使用colgroups设置了颜色

  <colgroup>
    <col style="background-color:lightgrey">
    <col style="background-color:white">
    <col style="background-color:lightgrey">
  </colgroup>

我想要的是有一个带条纹的表，其中列交替颜色，并使其在colspan行中生效。也就是说，我想要这样的东西：

对我来说，实现这一目标最简单的方法是什么

谢谢

---

jsFIDLE:

不确定这是否适用于实际的表，但您可以尝试以下方法：

表格{
溢出：隐藏；
}
tr：第一个孩子>th{
位置：相对位置；
}
tr:first child>th:：before{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：-1000px；/*即减去任何大于桌子高度的值*/
背景颜色：浅灰色；
z指数：-1；
}
tr：第一个孩子>第四个孩子（2）：：之前{
背景色：白色；
}

月
储蓄
名称
一月
$100
杰克
二月
$80
安得烈
总额：180美元

您想这样试试吗？不幸的是，这对我不起作用。我的用例比这里的示例要复杂一点，为了简单起见，我使用了这个示例。在我的例子中，colspan中有一个div元素，它需要使用colspan来跨越多个列。我想我们需要您在这里的精度：；）