title: How to put Material UI Table in the middle of page?
body: <p><strong>So how can I center the <code>&lt;Table&gt;</code> with a fixed width inside <code>&lt;div&gt;</code>, and when the browser gets small, just make the scrollbar to appear and maintain the <code>&lt;Table&gt;</code>'s fixed width? Thank you</strong> </p>
  
  <p>Here is what I have:</p>
  
  <pre><code>   &lt;div&gt;
      &lt;Table&gt;
        &lt;TableBody style={{width: 1000}}&gt;
          &lt;TableRow&gt;
            &lt;TableRowColumn&gt;Row 1&lt;/TableRowColumn&gt;
            &lt;TableRowColumn&gt;Content 1&lt;/TableRowColumn&gt;
          &lt;/TableRow&gt;
          &lt;TableRow&gt;
            &lt;TableRowColumn&gt;Row 2&lt;/TableRowColumn&gt;
            &lt;TableRowColumn&gt;Content 2&lt;/TableRowColumn&gt;
          &lt;/TableRow&gt;
        &lt;/TableBody&gt;
      &lt;/Table&gt;
     &lt;div/&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p><a href="https://i.stack.imgur.com/LoWDT.png" rel="nofollow"><img src="https://i.stack.imgur.com/LoWDT.png" alt="enter image description here"></a></p>