sticky-top and table-responsive don't work together

[Fuseteam]

this is due to overflow-x:auto and postion:sticky not working as expected. whenver a parent of a sticky element has an overflow other than visible it become the scrolling container for position sticky. i.e. the element will stick instead of the parent instead of inside of the viewport

[Fuseteam]

i managed to work around it by introducing a duplicate set of table headers and making that visible on scroll but due to the nature of position:sticky it can be jumpy. i posted this so that this behavior is somewhat documented. i took me quite a bit of time to figure out why it didn't work

[Fuseteam]

i have now managed to get it to work without javascript and without a duplicate set of table headers here: https://codepen.io/fuseteam/pen/BaKRdZY?editors=1100 by giving the div containing the table the height of the body