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

EDIT

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

EDIT

• javascript
• html
• css
• reactjs
• material-ui

1 Answer 1

Here's an example: https://jsfiddle/mzt8pvtu/3/

HTML:

<div id="container"></div>

JS:

const { Table, TableHeader, TableBody, TableRow, RaisedButton, TableRowColumn, TableHeaderColumn, MuiThemeProvider, getMuiTheme } = MaterialUI;

 class Example extends React.Component {
  render() {
    return (
        <div style={{ width: '100%' }}>
        <Table style={{ width: 400, margin: 'auto' }}>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Name</TableHeaderColumn>
              <TableHeaderColumn>Status</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableRowColumn>1</TableRowColumn>
              <TableRowColumn>John Smith</TableRowColumn>
              <TableRowColumn>Employed</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>2</TableRowColumn>
              <TableRowColumn>Randal White</TableRowColumn>
              <TableRowColumn>Unemployed</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>3</TableRowColumn>
              <TableRowColumn>Stephanie Sanders</TableRowColumn>
              <TableRowColumn>Employed</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>4</TableRowColumn>
              <TableRowColumn>Steve Brown</TableRowColumn>
              <TableRowColumn>Employed</TableRowColumn>
            </TableRow>
          </TableBody>
        </Table>      
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);