Problems with frozen/sticky columns on wide tables

[gofford]

This tutorial is a great example for setting one or more columns as sticky.

However it doesn't seem to work as-is if the horizontal width of the data being scrolled is greater than the width of the visible table. If the scrolled width exceeds this, the frozen columns move off the page.

See: https://user-images.githubusercontent.com/32452466/216165587-1a1aa40e-6e65-4689-9b46-aa527cfbcdfa.mov

It's undoubtedly a CSS issue. And it seems to be related (or at least similar) to this Stack Overflow question but after a few hours of trying I can't reconcile this (or linked) resolutions with the table framework. The desired behaviour is for a sticky column to be sticky for all table widths.

Have you seen this behaviour before, @rwieruch ? If so, do you know of a way to prevent it happening?

[gofford]

Update:

Looking at this more closely, I can avoid the "off scrolling" behaviour on the table rows with the following CSS in a custom stylesheet:

.tbody > div { 
    width: auto !important 
}

which overrides the width: 100% which applied automatically to the element on generation. I have yet to figure out how to obtain the same effect on the header, so any thoughts would be welcome if you've got them? 🙏