sto*_*akt 6 css frontend html-table flexbox css-grid
我想使用 CSS Grid 为我正在构建的表格中的每一行着色。但是我无法让它工作，我只能让其他所有列都着色。这是我想做的事情的图片。有没有更好的方法来构建它？我只使用 CSS Grid 因为它是我想学习的新东西。
这是我当前的代码：
.wrapper {
border-style: solid;
border-color: rgb(230, 230, 230);
font-weight: bold;
text-align: center;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(18, 35px);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.wrapper>div:nth-child(odd) {
background: #ddd;<div class="container">
<div class="wrapper">
<div>Month</div>
<div>Overtime Hours</div>
<div>Compensation Hours</div>
<div>Vacation</div>
<div>Personal Hours</div>
<div>Sick Hours</div>
<div>Carry Over</div>
<div>0.00</div>
<div>-</div>
<div>35.00</div>
<div>-</div>
<div>-</div>
<div>Allotted</div>
<div>-</div>
<div>-</div>
<div>140.00</div>
<div>14.00</div>
<div>-</div>
<div>Starting Total</div>
<div>0.00</div>
<div>-</div>
<div>175.00</div>
<div>14.00</div>
<div>-</div>
<div>Jan</div>
<div>-</div>
<div>-</div>
<div>-</div>
<div>2.00</div>
<div>7.00</div>
<div>Feb</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>-</div>
<div>-</div>
<div>March</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>April</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>May</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Jun</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Jul</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Aug</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Sep</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Oct</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Nov</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Dec</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Yearly Total</div>
<div>0.00</div>
<div>0.00</div>
<div>150.50</div>
<div>10.50</div>
<div>28.00</div>
<div>Balance in Hours</div>
<div></div>
<div>0.00</div>
<div>24.50</div>
<div>3.50</div>
<div></div>
<div>Balance in Days</div>
<div></div>
<div>0.00</div>
<div>3.50</div>
<div>0.50</div>
<div></div>
</div>
</div>您为每行定义固定高度，以便您可以轻松考虑重复渐变：
.wrapper {
border-style: solid;
border-color: rgb(230, 230, 230);
font-weight: bold;
text-align: center;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(18, 35px);
background:
repeating-linear-gradient(#ddd 0 35px,transparent 35px 70px);
}<div class="container">
<div class="wrapper">
<div>Month</div>
<div>Overtime Hours</div>
<div>Compensation Hours</div>
<div>Vacation</div>
<div>Personal Hours</div>
<div>Sick Hours</div>
<div>Carry Over</div>
<div>0.00</div>
<div>-</div>
<div>35.00</div>
<div>-</div>
<div>-</div>
<div>Allotted</div>
<div>-</div>
<div>-</div>
<div>140.00</div>
<div>14.00</div>
<div>-</div>
<div>Starting Total</div>
<div>0.00</div>
<div>-</div>
<div>175.00</div>
<div>14.00</div>
<div>-</div>
<div>Jan</div>
<div>-</div>
<div>-</div>
<div>-</div>
<div>2.00</div>
<div>7.00</div>
<div>Feb</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>-</div>
<div>-</div>
<div>March</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>April</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>May</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Jun</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Jul</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Aug</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Sep</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Oct</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Nov</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Dec</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Yearly Total</div>
<div>0.00</div>
<div>0.00</div>
<div>150.50</div>
<div>10.50</div>
<div>28.00</div>
<div>Balance in Hours</div>
<div></div>
<div>0.00</div>
<div>24.50</div>
<div>3.50</div>
<div></div>
<div>Balance in Days</div>
<div></div>
<div>0.00</div>
<div>3.50</div>
<div>0.50</div>
<div></div>
</div>
</div>如果您有一个六列网格，那么每 6+1 个元素就有一个新行，对于每个奇数行上的替代模式，那么您的重复模式每 12+1 个元素开始。:nth-child(n+n)会在这里帮助你：
.wrapper {
border-style: solid;
border-color: rgb(230, 230, 230);
font-weight: bold;
text-align: center;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(18, 35px);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
/* 6 columns, odd rows starts every 12th element, a row is made of six elements, so here is 6 selectors to select an entire row*/
.wrapper>div:nth-child(12n+1),
.wrapper>div:nth-child(12n+2),
.wrapper>div:nth-child(12n+3),
.wrapper>div:nth-child(12n+4),
.wrapper>div:nth-child(12n+5),
.wrapper>div:nth-child(12n+6)
{
background: #ddd;
}<div class="container">
<div class="wrapper">
<div>Month</div>
<div>Overtime Hours</div>
<div>Compensation Hours</div>
<div>Vacation</div>
<div>Personal Hours</div>
<div>Sick Hours</div>
<div>Carry Over</div>
<div>0.00</div>
<div>-</div>
<div>35.00</div>
<div>-</div>
<div>-</div>
<div>Allotted</div>
<div>-</div>
<div>-</div>
<div>140.00</div>
<div>14.00</div>
<div>-</div>
<div>Starting Total</div>
<div>0.00</div>
<div>-</div>
<div>175.00</div>
<div>14.00</div>
<div>-</div>
<div>Jan</div>
<div>-</div>
<div>-</div>
<div>-</div>
<div>2.00</div>
<div>7.00</div>
<div>Feb</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>-</div>
<div>-</div>
<div>March</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>April</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>May</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Jun</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Jul</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Aug</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Sep</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Oct</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Nov</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Dec</div>
<div>-</div>
<div>-</div>
<div>7.00</div>
<div>2.00</div>
<div>3.50</div>
<div>Yearly Total</div>
<div>0.00</div>
<div>0.00</div>
<div>150.50</div>
<div>10.50</div>
<div>28.00</div>
<div>Balance in Hours</div>
<div></div>
<div>0.00</div>
<div>24.50</div>
<div>3.50</div>
<div></div>
<div>Balance in Days</div>
<div></div>
<div>0.00</div>
<div>3.50</div>
<div>0.50</div>
<div></div>
</div>
</div>注意：如果您的任何元素跨越 1 个以上的单元格，则:nth-child(n+x)规则将中断。
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#examples
:nth-child()的
:nth-child()CSS伪类匹配基于其的基团的兄弟姐妹中位置的元件。