title: HTML Table with Border Radius & Sticky Header
body: <p>I have a HTML <code>&lt;table&gt;</code> with a <code>border-radius</code> and a sticky header using <code>position: sticky</code> that looks like this:</p>
  <p><a href="https://codepen.io/muhammadrehansaeed/pen/OJpeeKP" rel="nofollow noreferrer">https://codepen.io/muhammadrehansaeed/pen/OJpeeKP</a></p>
  <p><a href="https://i.stack.imgur.com/Axe56.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Axe56.png" alt="enter image description here" /></a></p>
  <p>However, when scrolling with the sticky header, the table rows stick out where the rounded corner of the sticky header lives. See top left of this image:</p>
  
  <p><a href="https://i.stack.imgur.com/bEJHn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bEJHn.png" alt="table row borders displayed in area cut out by border radius of sticky header" /></a></p>
  <p>Is there a way I can maintain the rounded corners when scrolling down with the sticky header or remove the sticky header when the header becomes sticky and moves down from its original position? Ideally, I'd like a <strong>CSS only</strong> solution.</p>