td border disappears when applying transform translate

Question

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

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.

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

A plunker with the source can be found here.

Answer 1

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>

Hope this helps