Currently, I am working with a Material-UI's <Table> embedded within a <div>. My goal is to center the <Table> while maintaining a fixed width. I want the table to remain centered in the browser, but if the browser window is minimized, I would like scroll bars to appear for viewing.
How can I achieve this - centering the <Table> with a fixed width inside a <div>, and ensuring that scrollbars appear when needed to maintain the fixed width of the <Table>? Thank you!
Below is my current setup:
<div>
<Table>
<TableBody style={{width: 1000}}>
<TableRow>
<TableRowColumn>Row 1</TableRowColumn>
<TableRowColumn>Content 1</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>Row 2</TableRowColumn>
<TableRowColumn>Content 2</TableRowColumn>
</TableRow>
</TableBody>
</Table>
<div/>
I tried applying the following styling to the <div>:
style={{display: 'flex', alignItems: 'center', justifyContent: 'center}}