CodePen and a screenshot of the issue

As shown above, when I scroll down the body of the table is visible under the header due to the transparent background. Ideally I would like to keep this transparency, how could I hide the section of the table body underneath the header?

I have tried using the clip-path property in CSS with no success there, as well as putting the table body in a div but that messes up the fixed spacing of the tables columns.