Why border is not visible with "position: sticky" when background-color exists?
I faced the same problem. My workaround was to use the :after pseudo element to emulate a bottom border.
th:after{
content:'';
position:absolute;
left: 0;
bottom: 0;
width:100%;
border-bottom: 1px solid rgba(0,0,0,0.12);
}
seems like to force a reflow will partially help :
table {
border-collapse: collapse;
}
thead {
position: sticky;
top: 0;
}
th {
border-right: 5px solid red;
transform:scale(0.999);
} <table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>background-clip seems also efficient and harmless:
table {
margin-top: 1em;
border-collapse: collapse;
margin-bottom: 200vh
}
thead {
position: sticky;
top: 0;
}
th {
border-right: 5px solid red;
background:white;
background-clip: padding-box;
} <table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
</table>