I just can’t get a sticky table header inside an overflow-x: auto div to work.

The goal is to have a table with many columns that is contained within the div (100% div) yet be able to scroll the overflow horizontally, with the table’s header fixed to the top of the page when scrolling passed it vertically.

    
                ...
            

        

            

                
Col 1
                
Col 2
         
    

I can only get to either:

1. Have the sticky header with rows overflowing on the right
2. Or fit the overflow inside the div containing the table but without a a fixed header on the top when scrolling passed the table’s header!

The table itself is using Bootstrap ‘table’ class.

There’s got to be a way to accomplish this, it just seems that whenever I add the overflow-x to take care of the horizontal overflow of the table, the stickiness of the table’s header is obliterated.

Sticky header class alone works in thead, and the header gets fixed on top of the page once it scrolls passed the table.

sticky tr > th {
    position: sticky;
    top: 0;
}

Why is it that when I add the ‘overflow-x: auto’ style in the div containing the table with a sticky table header, it makes the header not sticky?

And how can I accomplish this?

Edit: here's a Fiddle.

Currently the overflow-x handles the table's overflow, hiding it after the container's width (100%), but if you scroll passed the header, nothing happens. Commenting out line 37, overflow-x: auto; on the d1 class, you achieve the desired sticky header once scrolling down the page, but now the table extends passed the width of the container.

How can I have both? Hiding the table's overflow but still having the header sticky to the top of the page once scrolling down the page?