Question

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

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

页面加载时，顶行显示边框，但一旦向下滚动，它们就会消失。

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

可以找到有源的plunker here。

Answer 1

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

边界崩溃：分开; - ：这为表格单元格设置了单独的边框，如果它的边界崩溃：崩溃;然后细胞分享他们的边界。

当我们翻译时，只有细胞移动分享它们的边界并导致问题。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助

应用变换平移时，td边框消失

1 个答案: