如何实现表格选中单元格Hatch图案无缝对齐且随页面滚动

我希望给表格中部分单元格添加Hatch阴影线图案来高亮，且相邻的同图案单元格之间要实现图案无缝衔接。

当前代码 #

CSS代码 #

table.demo {
  border: 1px solid blue;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

table.demo td {
  height: 100px;
}

table.demo td.stripes {
  /* Using  background-attachment: fixed;  is _not_ the desired solution, because the background no longer scrolls alogn with the table. */
  /* background-attachment: fixed; */

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAAIElEQVQImWNggIKOjo7/HR0d/xmQAbIAnI2hCocYYQAATEQPi+UvdB4AAAAASUVORK5CYII=);
}

table.demo td.B { background-color: #ffe; }
table.demo td.C { background-color: #efe; }
table.demo td.E { background-color: #eef; }
table.demo td.F { background-color: #fee; }

HTML代码 #

<table class="demo">
  <tr>
    <td class="stripes A">A</td>
    <td class="stripes B">B</td>
    <td class="stripes C">C</td>
  </tr>
  <tr>
    <td class="stripes D">D</td>
    <td class="stripes E">E</td>
    <td class="stripes F">F</td>
  </tr>
  <tr>
    <td class="stripes G">G</td>
    <td>H</td>
    <td class="stripes I">I</td>
  </tr>
</table>

问题表现 #

当前单元格交界处的图案会出现错位，放大后效果如下：

期望效果 #

实现相邻单元格间图案的无缝衔接，效果如下：

已尝试的无效方案 #

• 使用background-attachment: fixed;能暂时解决图案对齐问题，但背景会固定在视口，无法随表格同步滚动，不符合需求。
• 将背景图案直接应用到<table>元素上会覆盖所有单元格，无法仅高亮指定的目标单元格，不可行。

解决方案 #

通过单元格伪元素+CSS变量+JS动态计算的方式实现图案对齐，同时保证背景随表格滚动：

修改后的CSS代码 #

table.demo {
  position: relative;
  border: 1px solid blue;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

table.demo td {
  height: 100px;
  position: relative;
  /* 保留原有单元格背景色 */
}

table.demo td.stripes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAAIElEQVQImWNggIKOjo7/HR0d/xmQAbIAnI2hCocYYQAATEQPi+UvdB4AAAAASUVORK5CYII=);
  /* 通过CSS变量让所有伪元素的背景对齐到表格左上角 */
  background-position: calc(-1 * var(--table-x)) calc(-1 * var(--table-y));
  pointer-events: none; /* 不干扰单元格内的交互 */
}

table.demo td.B { background-color: #ffe; }
table.demo td.C { background-color: #efe; }
table.demo td.E { background-color: #eef; }
table.demo td.F { background-color: #fee; }

添加JS代码 #

const table = document.querySelector('table.demo');

// 计算表格相对于视口的位置，更新CSS变量
function updateBackgroundOffset() {
  const rect = table.getBoundingClientRect();
  table.style.setProperty('--table-x', `${rect.left}px`);
  table.style.setProperty('--table-y', `${rect.top}px`);
}

// 初始化和监听滚动、窗口调整事件
updateBackgroundOffset();
window.addEventListener('scroll', updateBackgroundOffset);
window.addEventListener('resize', updateBackgroundOffset);

方案原理 #

1. 给每个带条纹的单元格添加伪元素，将Hatch图案放在伪元素上；
2. 通过JS实时计算表格在视口中的位置，将坐标值存入表格的CSS变量；
3. 所有伪元素的background-position基于这些变量反向偏移，使图案的原点统一对齐到表格的左上角；
4. 当表格滚动或窗口大小变化时，实时更新变量值，保证图案始终无缝衔接。

内容的提问来源于stack exchange，提问作者Carsten Fuchs