I've created a scrolling table with some header line spacing showing up when scrolled. Do you know how to hide it?
Check out this Codepen example
Here's the HTML structure:
<div class="table-container">
<table class="table">
<thead class="table-head text-center text-white">
<tr>
<th colspan="1" style="width: 30%;">Text 6</th>
<th colspan="1" style="width: 30%;">Text 7</th>
<th colspan="1" style="width: 40%;">Text 6</th>
</tr>
<tr>
<th colspan="1" style="width: 30%;">Text</th>
<th colspan="1" style="width: 30%;">Text</th>
<th colspan="1" style="width: 40%;">Text</th>
</tr>
</thead>
<tbody class="body-half-screen">
/.../
</tbody>
</table>
</div>
And here is the CSS for styling the table:
.table-container {
width: 100%;
overflow: auto;
height: 50vh;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table-head {
vertical-align: middle;
position: -webkit-sticky;
position: sticky;
will-change: transform;
top: 0;
z-index: 2;
background-color: gray;
}
.table th, .table td {
border: 1px solid gray;
}