16

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

picture of my table

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
stormakt
  • 421
  • 2
  • 5
  • 12
  • Honestly for a table using a table element is the best choice. You can then use `tr:nth-child(even)` (or odd) to style your rows. If you want to learn grid then build a grid layout, not a table. Something like a sidebar, a grid of images in a gallery. – cloned Oct 05 '19 at 19:25

2 Answers2

21

if you have a six column grid, then you have a new row every 6+1 elements, for an alternative pattern on each odd rows, then your repeating patterns starts every 12+1 elements. :nth-child(n+n) will help you here :

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

Note: if any of your elements spans more than 1 cell, the :nth-child(n+x) rule will break.

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#examples

:nth-child()

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

Comments shows a possible issue if grid has gaps :

.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;
  gap: 0.5em 1em;
  overflow:hidden;
}
/* 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;
  box-shadow:1em 0 #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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • 3
    A link to information on `:nth-child(n+n)` (even if it seems obvious) would be helpful. It's difficult to search for something like this, since we aren't provided a name for the technique. – BBaysinger Aug 31 '21 at 11:14
  • 1
    @BBaysinger good point , added a link to mdn for reference. – G-Cyrillus Aug 31 '21 at 15:57
  • Of course, this will set the background color of each child element for the row, which will appear as if the background color is set for the whole row, but only if column-gap is 0. If the grid has column gaps, the background color for the row will have color gaps. – KenB Feb 04 '23 at 07:41
  • @KenB this not a big trouble, i added a second snippet to show a way to fill that gap with the same color as background ;) – G-Cyrillus Feb 04 '23 at 10:46
6

You are defining a fixed height for each row so you can easily consider a repeated gradient:

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • this works, but how, what is repeating-linear-gradient doing? also gap will break this table? and you also cant justify-self on child items, as they would also break the table. – Ricky-U Oct 22 '20 at 10:10
  • It worked so nicely until I scrolled my grid to the left within its scrollable div. On Chrome, it only shades the originally-visible portion, prior to scrolling. – Joe Lapp Jun 02 '22 at 23:23
  • 1
    for some reason, i have a guts feeling this would fail, especially when one of the row extends certain height. – windmaomao Aug 25 '22 at 13:31