使用CSS网格为每隔一行着色

我想使用CSS网格为我正在构建的表中的每一行着色。我不能让它工作，但我只能让每一个其他列的颜色。这是我想做的一张照片。有没有更好的办法来解决这个问题？我之所以使用CSS网格，是因为它是我想学习的新东西

以下是我当前的代码：

.wrapper{
边框样式：实心；
边框颜色：rgb（230、230、230）；
字体大小：粗体；
文本对齐：居中；
显示：网格；
网格模板列：重复（6，1fr）；
网格模板行：重复（18，35px）；
栅柱间隙：0px；
网格行间距：0px；
}
.wrapper>div:n个子项（奇数）{
背景：#ddd；

月
加班时间
补偿时间
假期
私人时间
病假
结转
0
-
35
-
-
分配
-
-
140
14
-
起始总数
0
-
175
14
-
简
-
-
-
2
7
二月
-
-
7
-
-
前进
-
-
7
2
3.50
四月
-
-
7
2
3.50
也许
-
-
7
2
3.50
六月
-
-
7
2
3.50
七月
-
-
7
2
3.50
八月
-
-
7
2
3.50
九月
-
-
7
2
3.50
十月
-
-
7
2
3.50
十一月
-
-
7
2
3.50
12月
-
-
7
2
3.50
年度总数
0
0
150.50
10.50
28
小时余额
0
24.50
3.50
以天计算的余额
0
3.50
0.50

如果您有一个六列网格，那么每6+1个元素就有一个新行，对于每个奇数行上的替代模式，那么您的重复模式每12+1个元素就开始一次。

：第n个子元素（n+n）

将帮助您：

.wrapper{
边框样式：实心；
边框颜色：rgb（230、230、230）；
字体大小：粗体；
文本对齐：居中；
显示：网格；
网格模板列：重复（6，1fr）；
网格模板行：重复（18，35px）；
栅柱间隙：0px；
网格行间距：0px；
}
/*6列，奇数行从每12个元素开始，一行由6个元素组成，所以这里有6个选择器来选择整行*/
.wrapper>div:n子级（12n+1），
.wrapper>div:n子级（12n+2），
.wrapper>div:n子级（12n+3），
.wrapper>div:n子级（12n+4），
.wrapper>div:n子级（12n+5），
.wrapper>div:n子级（12n+6）
{
背景：ddd；
}

月
加班时间
补偿时间
假期
私人时间
病假
结转
0
-
35
-
-
分配
-
-
140
14
-
起始总数
0
-
175
14
-
简
-
-
-
2
7
二月
-
-
7
-
-
前进
-
-
7
2
3.50
四月
-
-
7
2
3.50
也许
-
-
7
2
3.50
六月
-
-
7
2
3.50
七月
-
-
7
2
3.50
八月
-
-
7
2
3.50
九月
-
-
7
2
3.50
十月
-
-
7
2
3.50
十一月
-
-
7
2
3.50
12月
-
-
7
2
3.50
年度总数
0
0
150.50
10.50
28
小时余额
0
24.50
3.50
以天计算的余额
0
3.50
0.50
< /代码> 您为每一行定义了一个固定的高度，因此您可以很容易地考虑重复梯度：


.wrapper{
边框样式：实心；
边框颜色：rgb（230、230、230）；
字体大小：粗体；
文本对齐：居中；
显示：网格；
网格模板列：重复（6，1fr）；
网格模板行：重复（18，35px）；
背景：
重复线性梯度（#ddd 0 35px，透明35px 70px）；
}

月
加班时间
补偿时间
假期
私人时间
病假
结转
0
-
35
-
-
分配
-
-
140
14
-
起始总数
0
-
175
14
-
简
-
-
-
2
7
二月
-
-
7
-
-
前进
-
-
7
2
3.50
四月
-
-
7
2
3.50
也许
-
-
7
2
3.50
六月
-
-
7
2
3.50
七月
-
-
7
2
3.50
八月
-
-
7
2
3.50
九月
-
-
7
2
3.50
十月
-
-
7
2
3.50
十一月
-
-
7
2
3.50
12月
-
-
7
2
3.50
年度总数
0
0
150.50
10.50
28
小时余额
0
24.50
3.50
以天计算的余额
0
3.50
0.50
对于使用table元素的表，诚实地说是最好的选择。然后可以使用
tr:nth child（偶数）
（或奇数）设置行的样式。如果要学习网格，请创建网格布局，而不是表格。类似于侧边栏，图库中的图像网格。这是可行的，但如何实现的？重复线性渐变会破坏此表格吗？间隙也会破坏此表格吗？并且您也无法对子项进行自我调整，因为它们也会破坏表格。