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;
}

<div id="mainPanel">
  <div id="header">
    <div class="headCell">1</div>
    <div class="headCell">2</div>
    <div class="headCell">3</div>  
    <div class="headCell">4</div>
    <div class="headCell">5</div>
    <div class="headCell weekend">6</div>
    <div class="headCell weekend">7</div>
    <div class="headCell">8</div>
    <div class="headCell">9</div>
    <div class="headCell">10</div>
    <div class="headCell">11</div>
    <div class="headCell">12</div>
    <div class="headCell weekend">13</div>
    <div class="headCell weekend">14</div>
    <div class="headCell">15</div>
    <div class="headCell">16</div>
    <div class="headCell">17</div>
    <div class="headCell">18</div>
    <div class="headCell">19</div>
    <div class="headCell weekend">20</div>
  </div>
  
  <div id="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;
}

<div id="mainPanel">
  <div id="header">
    <div class="headCell">1</div>
    <div class="headCell">2</div>
    <div class="headCell">3</div>  
    <div class="headCell">4</div>
    <div class="headCell">5</div>
    <div class="headCell weekend">6</div>
    <div class="headCell weekend">7</div>
    <div class="headCell">8</div>
    <div class="headCell">9</div>
    <div class="headCell">10</div>
    <div class="headCell">11</div>
    <div class="headCell">12</div>
    <div class="headCell weekend">13</div>
    <div class="headCell weekend">14</div>
    <div class="headCell">15</div>
    <div class="headCell">16</div>
    <div class="headCell">17</div>
    <div class="headCell">18</div>
    <div class="headCell">19</div>
    <div class="headCell weekend">20</div>
  </div>
  
  <div id="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>