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>
if table contains border around columns and we add sticky position,when we scroll the table show overlapping effect to remove this effect andretains border we need to remove border and add outline instead of border
table tr th{ outline: 1px solid #e9ecef; border:none; outline-offset: -1px;}