将重复的背景色列添加到相同的div

Question

我正在寻找一个水平滚动部分的标题，该标题的顶部是日期计数器，跨度为一年。每个日期由一个div表示。周末的背景颜色与工作日不同。我没有使用任何图形库，只是直接使用HTML，CSS和JS。我最好不需要更改此设置。

我的目标是使周末的背景颜色向下延伸到面板主体而不会破坏那里的布局和元素。最终结果将如下所示：

我认为可能有效的方法：

• 扩展周末单元格的背景色，以便它们在主面板的高度垂直向下连续。这要求单元格的背景色可以扩展到元素的边界之外]
• 让面板以一定间隔显示不同的背景颜色。这将需要能够多次更改SAME div的背景颜色]

如果我根本不知道做事的更好方法，我肯定会接受其他想法。

优化是一个关键问题，因为我希望有几百行数据（在垂直滚动div中）以及300列以上（在水平滚动div中）。我进行了一项测试，以确定它是否仍能对每个单元格的div进行足够的响应。答案绝对不是：加载需要花费几秒钟，滚动时很笨拙，总体来说不好用。 60,000个元素不足为奇。

我尝试执行以下操作：

• 在周末元素上执行变换和pseduo选择器以扩展背景（在：after元素上遇到了麻烦，同时也扩展了当前元素的大小）。我也遇到了一个问题，即使尝试了一些基本的转换后，也要使：after选择器向下应用而不是向右应用]
• 将整个事物离散化，并在一行中每个可代表的日子添加div。以我所期望的规模，这太糟糕了，不幸的是无法使用，但是从技术上来说，它具有理想的外观

可用于获得与当前环境相似的示例代码：

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

任何对概念有帮助的帮助将不胜感激，任何对阅读材料的引用都会锦上添花。预先感谢一吨。

我正在寻找一个水平滚动部分的标题，该标题的顶部是日期计数器，跨度为一年。每个日期由一个div表示。周末有...

Answer 1

您可以通过添加以下代码来操纵.weekend::after伪元素：