title: Adding repeating background-colour column to same div
body: <p>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 div. Weekends have a background color that is different than the week days. I am not using any graphics library, just straight HTML, CSS and JS. It is preferable that I do not need to change this.</p>
  
  <p>My goal is to make it so that the weekend background color will extend down the main body of the panel <strong>without disrupting the layout and elements present there</strong>. The end result would look something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Fme6o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fme6o.png" alt="enter image description here"></a></p>
  
  <p>Things I thought could potentially work:</p>
  
  <ul>
  <li>Extend the background color of the weekend cells so that they continue vertically down the height of the main panel. This requires that background colors of cells can extend beyond the bounds of an element</li>
  <li>Have the panel show different background colors at certain intervals. This would require the ability to alternate the background color of the SAME div multiple times</li>
  </ul>
  
  <p>I am definitely open to any other ideas if I am simply unware of a better way to do things.</p>
  
  <p>Optimization is a key concern, as I am expecting to have a couple of hundred rows of data (in a vertically scrollable div) as well as 300+ columns (in a horizontally scrollable div). I have run a test to determine if it was still responsive enough with a div per cell. The answer was most definitely not: it took seconds to load, it was laggy with the scrolling and overall just not nice to use. Not particularly surprising at 60,000 elements.</p>
  
  <p>I have tried doing the following:</p>
  
  <ul>
  <li>Doing a transform and pseduo selector on the weekend elements to extend the background (have had trouble with the :after element also extending the size of the current element). I've also had a problem trying to get the :after selector to apply down rather than to the right, even after trying some basic transforms</li>
  <li>Making the entire thing discrete and adding divs for every representable day of a row. This was awful and unfortunately unusable at the scale I am expecting, but technically has the desired appearance</li>
  </ul>
  
  <p>Sample code that can used to get a similar situation to my current environment:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mainPanel"&gt;
    &lt;div id="header"&gt;
      &lt;div class="headCell"&gt;1&lt;/div&gt;
      &lt;div class="headCell"&gt;2&lt;/div&gt;
      &lt;div class="headCell"&gt;3&lt;/div&gt;  
      &lt;div class="headCell"&gt;4&lt;/div&gt;
      &lt;div class="headCell"&gt;5&lt;/div&gt;
      &lt;div class="headCell weekend"&gt;6&lt;/div&gt;
      &lt;div class="headCell weekend"&gt;7&lt;/div&gt;
      &lt;div class="headCell"&gt;8&lt;/div&gt;
      &lt;div class="headCell"&gt;9&lt;/div&gt;
      &lt;div class="headCell"&gt;10&lt;/div&gt;
      &lt;div class="headCell"&gt;11&lt;/div&gt;
      &lt;div class="headCell"&gt;12&lt;/div&gt;
      &lt;div class="headCell weekend"&gt;13&lt;/div&gt;
      &lt;div class="headCell weekend"&gt;14&lt;/div&gt;
      &lt;div class="headCell"&gt;15&lt;/div&gt;
      &lt;div class="headCell"&gt;16&lt;/div&gt;
      &lt;div class="headCell"&gt;17&lt;/div&gt;
      &lt;div class="headCell"&gt;18&lt;/div&gt;
      &lt;div class="headCell"&gt;19&lt;/div&gt;
      &lt;div class="headCell weekend"&gt;20&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div id="panelBody"&gt;
      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.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help with concepts that could assist with this would be much appreciated, and any references to reading materials would be icing on the cake. Thanks a tonne in advance.</p>