应用转换翻译时，td边框消失

Question

我正在建立具有固定标题和固定第一列的表。

通过在滚动事件上应用transform transformX / Y，标题和列保持固定。

页面加载时，边框在第一行可见，但是一旦向下滚动一点，边框就会消失。

我需要什么CSS才能使边框消失？

可在此处找到带有来源的source窃者。

Answer 1

我遇到了类似的情况，并添加border-collapse: separate;border-spacing: 0px;到表中修复了此问题。

边界崩溃：单独；-：为表格单元格设置单独的边框，如果其border-collapse：折叠；然后细胞共享边界。

当我们翻译时，只有那些移动它们的边界并引起问题的单元移动。

table.scroll {
    table-layout: fixed;
    border-spacing: 0px;
    border: 1px solid #333;
    border-collapse: separate;
}

table.scroll {
    table-layout: fixed;
    border-spacing: 0px;
    border: 1px solid #333;
    border-collapse: separate;
}

document.getElementById("table-container").addEventListener("scroll", function() {
  var translate = "translate(0," + this.scrollTop + "px)";
  this.querySelector("thead").style.transform = translate;

});

thead, tr, th, td, tbody{
	border: 1px solid;
	text-align: center;
	padding: 3px;
	
}
table.scroll {
    table-layout: fixed;
    border-spacing: 0px;
    border-collapse: separate;
}
th{
	background-color:#99ccff;
	height: 40px;
	font-size: 20px;

}

tr{
	width: 500%;
	height: 20px;
	font-size: 17px;
}

tr:nth-child(even) {
	background-color: #CCFFFF;
}
tr:nth-child(odd) {
	background-color: #fae8d1;
}

#table-container{
	float:left;
	height: 200px;
	border: 2px solid;
	overflow: auto;
}

希望这可以帮助