Adding repeating background-colour column to same div - html

Question

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.
My goal is to make it so that the weekend background color will extend down the main body of the panel without disrupting the layout and elements present there. The end result would look something like this:
Things I thought could potentially work:
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
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
I am definitely open to any other ideas if I am simply unware of a better way to do things.
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.
I have tried doing the following:
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
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
Sample code that can used to get a similar situation to my current environment:
#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;
}
<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>
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.

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

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