Issue with layout, vertical scrolling on body element and a table with horizontal scrolling & sticky headers

I have overflow-y auto on body and a content which contains a table.
there is a div that contains the table and it has overflow-x auto for horizontal scrolling in table view.
the table has a thead with position sticky and top 0.
My current issues:

1. If I add the overflow-x auto to the div table container then thead sticky positioning is not working (it wont stick to the table top upon y axis scrolling).
2. If I change thead to fixed position it does work but creates another issue, it mess up the width of the thead container because fixed is based to screen view port and not relative to parent.

How can I do it?