I want to color every other row in a table i'm building using CSS Grid. I can't get it to work though, i'm only able to get every other column colored. Here's a picture of what I want to do. Would there be a better way of building this out? I'm only using CSS Grid because it's something new I wanted to learn.
picture of how I want it to look
Here's my current code:
.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>