应用transform translate时td边框消失

Question

我正在构建一个带有固定标题和固定第一列的表格。

通过在滚动事件上应用转换 translateX/Y 来固定标题和列。

当页面加载时，边框在顶行可见，但一旦您向下滚动一点，它们就会消失。

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

可以在here找到带有源代码的plunker。

Answer 1

我遇到了类似的情况并将border-collapse: separate;border-spacing: 0px; 添加到表中解决了这个问题。

边框折叠：分开； -：这为表格单元格设置单独的边框，如果它的边框折叠：折叠；然后单元格共享它们的边界。

当我们翻译时，只有共享边界的单元格移动并导致问题。

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;
}

<div id="table-container">
	<table class="scroll">
		<thead>
			<tr>
				<th class="col-md-2">Name</th>
				<th class="col-md-2">Birthday</th>
				<th class="col-md-2">Gender</th>
				<th class="col-md-2">Marital</th>
				<th class="col-md-2">Address</th>
				<th class="col-md-2">Telephone</th>
				<th class="col-md-2">Email</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
      <tr>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
				<td>Some Data</td>
			</tr>
		</tbody>
	</table>
</div>

希望对你有帮助