Question

我通过

锁定了表格标题

onScroll={() => { 
  document.querySelector('thead').style.transform = 
  `translate(0,${this.scrollRef.scrollTop}px)`; 
}}

但是当我滚动表格时，标题边框不会粘在标题上。

滚动时如何让边框留在标题上？

Answer 1

这将解决您的问题：

thead th {
  position:relative;
}
thead th:before {
  content: '';
  position: absolute;
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  border: 1px solid black;
  top: -1px;
  left: -1px;
  pointer-events: none;
}

不，JavaScript并没有改变边界。问题是边框实际上不是<th>元素的一部分，因为它们已经折叠。

在内部，浏览器会检查相邻元素以确定组合边框。这些边框的定位没有考虑应用于transform元素的<th>，而是考虑它们在DOM中的初始位置。

最简单的解决方案是使用:before伪元素绘制边框。

另一种解决方案是覆盖

border-collapse: collapse;

<{1}}上的

，由<table>申请但这意味着您的桌面边框将不再折叠（合并），而且很可能，您不希望这样。

Javascript使用标题转换边框

1 个答案: