I have a React Responsive Table that can end up having many columns, depending on user’s actions. In the case where the user chooses enough columns, I want my table to scroll horizontally. Since there are a lot of rows on the table, the table should also scroll vertically.

The issue is that if you horizontally scroll to the left, you cannot see the vertical scrollbar anymore. I want the vertical scrollbar to stay the visible the entire time.

Here is a snippet of what my table looks like.

— CSS EXAMPLE —

.my-table tbody {
    display: block;
    overflow-y: scroll;
}

.my-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.my-table thead {
    display: table;
    table-layout: fixed;
}

— REACT COMPONENT EXAMPLE–

const MyComponent = (props) => {

const renderColumnHeaders = () => {
    return props.columns.map((column, idx) => {
        return (
            <th
             key={idx}>
                {column}
            </th>
        )
    })
    
}

const renderRows = () => {
    return props.rows.map((row, idx)) => {
        return (
            <tr>{row.map(cell => <td>{cell.value}</td>)}</tr>
        )
    }
}


return(
<Table 
    className={'my-table'}
    size={'sm'}
    responsive={true}
>

    <thead>{renderColumnHeaders()}</thead>
    <tbody style={{ width: props.columns.length * 120, height props.height }}>
        {renderRows()}
    </tbody>
</Table>);
}

It seems like the problem is that the vertical scrollbar is only scrolling through the table body, and the horizontal scrollbar is scrolling both the table headers and the table body.

Have tried:

• Putting css on the scrollbar itself
• Making the column headers sticky

I am looking for this table’s scroll bars to behave similar to how excel works, where the scroll bars are always visible.