I am trying to display a table in a page that is laid out like this
However, with real data (especially on mobile) the chart is going to be significantly wider than the screen size.
Here is my goal. I would like vertical scrolling to work as expected. If more rows are added the page gets longer you scroll... great!
However horizontally I would like it to feel like only the table contents horizontally scroll. So essentially I don't want the header/footer or the search bar or the title or any other HTML content on the page to scroll horizontally. I want it to behave as though a very wide table were not there. However, of course, I would like the table to try to center itself and to scroll horizontally if it needs to.
I have tried overflow-x: scroll and that doesn't work as suddenly the whole page is scrolling. The goal is that JUST the table can horizontally scroll.