应用变换平移时，td边框消失 [英] td border disappears when applying transform translate

问题描述

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

I am building a table with a fixed header and a fixed first column.

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

The header and column stay fixed by applying transform translateX/Y on the scroll event.

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

When the page loads, the borders are visible on the top row but once you scroll down a little bit they disappear.

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

What CSS do I need to not let the border disappear?

可以找到一个带有源的plunker 这里。

A plunker with the source can be found here.

推荐答案

我遇到过类似情况情况并添加 border-collapse：单独; border-spacing：0px; 到表修复了这个。

I came across with similar situation and adding border-collapse: separate;border-spacing: 0px; to table fixed this.

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

border-collapse: separate; -: this set separate border for table cells and if its border-collapse: collapse; then cells share their border.

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

when we translate, only the cells move which share their border and that cause the problem.

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>

希望这会有所帮助

这篇关于应用变换平移时，td边框消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！