CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Walter
Walter

Reputation: 911

ReactJS: How to center align Material-UI's <Table> in <div>?

I currently have a Material-UI's <Table> inside a <div>, and would like the center the <Table>. But would like the <Table> to have a fixed width where, it stays centered to the browser, but if the browser gets minimized, would like the table to maintain its fixed width and use the scroll bars to view it.

So how can I center the <Table> with a fixed width inside <div>, and when the browser gets small, just make the scrollbar to appear and maintain the <Table>'s fixed width? Thank you

Here is what I have:

   <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/>

Here is what I tried for <div>: style={{display: 'flex', alignItems: 'center', justifyContent: 'center}}, and it partially centered but when the browser got too small, some kind of padding on the right side covers up the table

enter image description here

Upvotes: 0

Views: 10368

Answers (1)

sneha
sneha

Reputation: 445

In style if you write width 100% then after minimizing the browser it looks same.

  <div>
<Table>
  <TableBody style={{width: 100%}}>
    <TableRow>
      <TableRowColumn>Row 1</TableRowColumn>
      <TableRowColumn>Content 1</TableRowColumn>
    </TableRow>
    <TableRow>
      <TableRowColumn>Row 2</TableRowColumn>
      <TableRowColumn>Content 2</TableRowColumn>
    </TableRow>
  </TableBody>
</Table>

Upvotes: 1

Related Questions