HTML Table with Border Radius & Sticky Header

Question

I have a HTML <table> with a border-radius and a sticky header using position: sticky that looks like this:

https://codepen.io/muhammadrehansaeed/pen/OJpeeKP

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:

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 CSS only solution.

Answer 1

There is a more compact solution. Simply add a box-shadow with the background color to the first <th> and the last <th> to hide the elements.

On this example, on the right, you can see that the table rows are visible due to the border radius. On the left, I applied a box-shadow.

box-shadow: 0 -2.1rem 0 .6rem #E5E7EB;

Here, it's grayed out so that you can see it works, but you just need to use the same color as the background to make it completely invisible.

Here is the final result along with the code I am using:

th:first-child {
  border-radius: 0.75rem 0 0 0;
  border-left: .1rem solid #E5E7EB;
  box-shadow: 0 -2.1rem 0 .6rem #E5E7EB;
}

th:last-child {
  border-radius: 0 0.75rem 0 0;
  border-right: .1rem solid #E5E7EB;
  box-shadow: 1rem -2.1rem 0 .6rem #E5E7EB;
}

It may be necessary to adjust the box-shadow to hide the rows based on the chosen border-radius.