I recently built a screen with a very high and wide table in the center. This posed some challenges:

• Giving the table a horizontal scroll bar is very unergonomic, since the scrollbar might be far off screen.
• Making the whole page scrollable looks bad, since I don't want the rest of the UI to scroll.
• Giving the table its own vertical scrollbar and a limited height would have solved it, but felt weird, since the table was 90% of the page.

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

• Prevents you from data breaches and liability risks
• Upgrade at your own pace
• Works with modern Rubies

Read more Show archive.org snapshot

What I ended up doing is reusing the horizontal page scrollbar (which is naturally fixed at the bottom of the viewport) to only scroll the central table:

This works by

• sizing an outer container to be as wide as the table
• making the whole page position: sticky; left: 0
• capturing the scroll position with JavaScript and turning it into a transform: translateX on the table itself.

Note that the table header is sticky as well, and will not leave the viewport.

You can check out the implementation here Show archive.org snapshot .

Note

This does not work well on touch devices. A complete solution needs to feature-detect touch devices, and then degrade to a different solution.