Adding Repeating Background-colour Column To Same Div

I am looking at having a header to a horizontal scrollable section that would have a date counter along the top, spanning the length of a year. Each date is represented by a single

Solution 1:

You can manipulate the .weekend::after pseudo element by adding this code:

.weekend::after{
  content:'';
  position:absolute;
  height:100%;
  width:25px;
  top:1em;
  z-index:-1;
  background-color: #efefef;
}

Here is the full working code:

#mainPanel {
  overflow-x: scroll;
  display: flex;
  height: 100vh;
  flex-direction: column;
}

#header {
  height: 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.headCell {
  height: 100%; 
  border: 1px#cccccc solid; 
  border-left: none; 
  box-sizing: border-box; 
  min-width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekend {
  background-color: #efefef;
}

.weekend::after{
  content:'';
  position:absolute;
  height:100%;
  width:25px;
  top:1em;
  z-index:-1;
  background-color: #efefef;
}

<divid="mainPanel"><divid="header"><divclass="headCell">1</div><divclass="headCell">2</div><divclass="headCell">3</div><divclass="headCell">4</div><divclass="headCell">5</div><divclass="headCell weekend">6</div><divclass="headCell weekend">7</div><divclass="headCell">8</div><divclass="headCell">9</div><divclass="headCell">10</div><divclass="headCell">11</div><divclass="headCell">12</div><divclass="headCell weekend">13</div><divclass="headCell weekend">14</div><divclass="headCell">15</div><divclass="headCell">16</div><divclass="headCell">17</div><divclass="headCell">18</div><divclass="headCell">19</div><divclass="headCell weekend">20</div></div><divid="panelBody">
    Here is some text that will appear in the main div. I am hoping to see this not moved around and that the grey weekend lines will appear underneath the text.
  </div></div>

Solution 2:

You can add an :after and set a width of 0 with a margin-left equal to the width of the cell (16px in this case.

This can be seen i the following:

#mainPanel {
  overflow-x: scroll;
  display: flex;
  height: 100vh;
  flex-direction: column;
}

#header {
  height: 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.headCell {
  height: 100%; 
  border: 1px#cccccc solid; 
  border-left: none; 
  box-sizing: border-box; 
  min-width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekend {
  background-color: #efefef;
}

.weekend:after {
  background-color: #efefef;
  width: 20px;
  height: 100vh; /* Adjust to suit */;
  content: "";
  display: inline-block;
  margin-left: -16px;
  z-index: -1;
}

<divid="mainPanel"><divid="header"><divclass="headCell">1</div><divclass="headCell">2</div><divclass="headCell">3</div><divclass="headCell">4</div><divclass="headCell">5</div><divclass="headCell weekend">6</div><divclass="headCell weekend">7</div><divclass="headCell">8</div><divclass="headCell">9</div><divclass="headCell">10</div><divclass="headCell">11</div><divclass="headCell">12</div><divclass="headCell weekend">13</div><divclass="headCell weekend">14</div><divclass="headCell">15</div><divclass="headCell">16</div><divclass="headCell">17</div><divclass="headCell">18</div><divclass="headCell">19</div><divclass="headCell weekend">20</div></div><divid="panelBody">
    Here is some text that will appear in the main div. I am hoping to see this not moved around and that the grey weekend lines will appear underneath the text.
  </div></div>