Currently, I am in the process of setting up a table with fixed headers and columns that have a minimum width. To ensure this setup functions correctly, I require both vertical and horizontal scroll bars.
The vertical scroll bar should only navigate through the table rows, as the headers remain static at the top.
However, when scrolling horizontally, it is essential that both the rows and headers move together. This has been achieved by encompassing both the headers and body within a container div set to overflow-x: auto. The body itself has overflow-y: auto specified.
An issue arises from this configuration where the vertical scroll bar becomes hidden if you scroll all the way to the right since the body is nested within the horizontal scroll div.
I am looking for a solution where both scroll bars are constantly visible but only affect their respective content.
To illustrate this problem, I have created a demonstration on CodePen:
https://codepen.io/ntroncoso/pen/rmbrYQ
The key elements to focus on are the tableContainer and body:
#tableContainer
{
border: 2px solid red;
display: flex;
flex-direction: column;
overflow-x: auto;
}
#body
{
border: 2px solid green;
display: flex;
flex-direction: column;
overflow-y: auto;
min-width: 800px;
}
These styles effectively generate the required scroll bars, yet the vertical one disappears when the body content exceeds the width. Any applicable Javascript solutions would be greatly welcomed.