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

Question

我想为我正在使用CSS Grid构建的表中的其他行着色。我无法使其正常工作，但我只能使其他所有列都变色。这是我想做什么的图片。会有更好的方法来解决这个问题吗？我只使用CSS Grid，因为这是我想学习的新知识。

picture of how I want it to look

picture of my table

这是我当前的代码：

  .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>

Answer 1

如果您有一个六列网格，那么每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)规则将中断。

Answer 2

您要为每行定义一个固定的高度，以便可以轻松地考虑重复的渐变：

.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>