Sticky headers with overflow?

I have a table where I want to make the header and first column sticky (as shown in the example).

It works as intended, until I add overflow-x: scroll; (uncomment line 3 in styles.css). overflow-x: scroll retains the first columns stickiness but breaks the top headers stickiness.

A solution I tried but doesn't quite work:

I've read into this topic a bit and found an article that describes a solution to this exact problem. The article suggests extracting your headers into a separate div and then using a JS scroll sync library to synchronize the overflow-x scrolling of your headers and your rows (example 1, example 2).

This solves the stickiness + overflow problem, but introduces a new problem. The column width now can't adjust based on the length of data in the cells (as it does in my initial example) and computing this manually for every column seems sketchy.

How can I add overflow-x: scroll; to my table while retaining the following:

• Sticky header
• Sticky first column
• Column widths that adjust based on data provided
• No nested vertical scroll (the window scrollbar should be the only vertical scroll)

I'm open to hacks with JS.

EDIT: I found another article that suggests using a JS onScroll event listener to continuously translate the table headers to the top of the screen. I tried this solution and the effect is too janky to use with the amount of data I'm using.

from Sticky headers with overflow?