如何防止横向滚动时绿色盒子透过表格白色边框显示？

只需修改CSS，给.sticky类添加一个底部伪元素，即可在不使用JavaScript的前提下解决问题：

.container {
    overflow-x: auto;
    width: 250px;
}

table {
    border-collapse: collapse;
}

td {
  padding: 10px;
}

th {
    background-color: red;
    color: white;
    padding: 10px;
    position: relative;
}

tr {
  border-bottom: 1px solid white; 
}

.sticky {
    background-color: blue;
    color: white;
    position: sticky;
    z-index: 2;
}

.sticky::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: white;
}

/* 新增伪元素，用于遮挡Popover */
.sticky::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: white;
    z-index: 3;
}

.test1 {
    left: 0;
}

.test2 {
    left: 55.86px;
}

.test3 {
    left: calc(55.86px * 2);
}

.popover-container {
  position: relative
}

.popover {
  background-color: green;
  color: white;
  height: 40px;
  position: absolute;
  top: 10px;
  left: -12px;
  z-index: 1;
}

HTML部分无需修改，保持原结构即可。

原理说明 #

原表格的tr边框属于表格自身堆叠层级，而绝对定位的绿色Popover层级更高，导致滚动时Popover会透过边框显示。通过给固定列（.sticky）添加一个与tr边框样式一致的伪元素，并设置更高的z-index，这个伪元素会随固定列一起滚动，始终遮挡住Popover的对应部分，同时保留了原有的表格结构和白色边框要求。

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