带有标题的Javascript转换边框[关闭]答案

【问题标题】：Javascript transforming borders with headers [closed]带有标题的Javascript转换边框[关闭]
【发布时间】：2018-01-13 14:56:17
【问题描述】：

我通过

锁定了表头

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

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

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

【问题讨论】：

@meagar，大多数react 和angular 问题在Stack Overflow 的问题本身内不包含minimal reproducible example。与这个不同，大多数甚至根本不包含指向示例的链接。它们都应该作为题外话关闭吗？我个人觉得这个有一个明确的问题陈述，因此可以回答，很可能对未来有类似问题的访问者有用。
@AndreiGheorghiu 是的，他们应该这样做。此处的问题不能依赖于 Github 存储库或任何其他场外资源的链接。如果在不将用户引导到您设置的测试站点的情况下无法提出问题，则该问题与 Stack Overflow 无关。 “可回答”不是我们的主题标准。
已编辑问题以删除场外引用
@meagar 一些库增加了创建 sn-p 任务的复杂性。在根本没有例子和有一个关于问题是什么的具体信息的活生生的例子之间，很多时候，这就是理解问题与不理解问题之间的区别。让我这样说吧：如果我以当前形式找到问题，我不会回答，因为我无法确定原因是什么。我只关心react。所以它是影子 DOM。我不怎么用react。可能来自position:fixed，但如果我不能确定，为什么还要回答呢？我会通过的。
@AndreiGheorghiu 您不应该以当前形式或之前的形式回答问题。它曾经并且仍然是题外话。这里实际的 MCVE 与 react 无关，链接到整个 React 应用程序完全在这里做错了。我们想要包含最少个例子的独立问题，句号。

标签： javascript css reactjs html-table

【解决方案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> 元素的一部分，因为它们已折叠。

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

最简单的解决办法是使用:before伪元素来绘制边框。

另一种解决方案是覆盖

border-collapse: collapse;

在您的<table> 上，由bootstrap.css 申请。
但这意味着您的表格边框将不再折叠（合并），而且很可能您不希望这样。

【讨论】：