I have a table with fixed x number of top rows and y number of left columns.
Like : https://jsfiddle.net/26m75fge/11/
CSS :
div {
max-width: 40em;
max-height: 20em;
overflow: scroll;
position: relative;
}
table {
position: relative;
border-collapse: collapse;
}
td,
th {
padding: 0.25em;
border: 0.25em solid white;
}
thead tr:nth-child(1) {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0.25em;
background: #000;
color: #FFF;
z-index: 2;
}
thead tr:nth-child(2) {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 2em;
background: #000;
color: #FFF;
z-index: 2;
}
thead th:first-child {
left: 0;
z-index: 1;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
background: #FFF;
border-right: 1px solid #CCC;
}
HTML :
<table>
<thead>
<tr>
<th></th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
....
</tr>
<tr>
<th></th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
....
</tr>
</thead>
<tbody>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
.....
</tr>
</tbody>
</table>
</div>
However, when I scroll my other cells I can see the “Hidden” rows in the background/ border-spacing of the table. (See: cells in border spacing)
Is there a way using CSS/JS to hide these make the border so that these cells dont show up once they are scrolled?