title: How can I change a width of table Material UI / React?
body: <p>I'm making an application with React.JS and Material UI.</p>
  
  <p>I use the table component for my application. I could change the width of column but I cannot change the width of table. </p>
  
  <p>The width of table should be as same as the width of header component.(Purple color).</p>
  
  <p>How can I achieve this?</p>
  
  <p>Please find the current view below.  I would appreciate any kind of advice. Thank you so much for your help in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/5jWFh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5jWFh.png" alt="enter image description here"></a></p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  } from 'material-ui/Table';
  import Check from './img/check.png';
  import Fail from './img/fail.png';
  import Master from './img/Master.png';
  import Visa from './img/Visa.png';
  import Paypal from './img/Paypal.png';
  
  class PaymentTable extends React.Component {
  render() {
  return(
    &lt;Table&gt;
    &lt;TableHeader displaySelectAll={false} adjustForCheckbox={false}&gt;
    &lt;TableRow&gt;
      &lt;TableHeaderColumn&gt;&lt;/TableHeaderColumn&gt;
      &lt;TableHeaderColumn&gt;Today&lt;/TableHeaderColumn&gt;
      &lt;TableHeaderColumn&gt;Payment Method&lt;/TableHeaderColumn&gt;
      &lt;TableHeaderColumn&gt;Narrative&lt;/TableHeaderColumn&gt;
      &lt;TableHeaderColumn&gt;Amount&lt;/TableHeaderColumn&gt;
    &lt;/TableRow&gt;
  &lt;/TableHeader&gt;
  &lt;TableBody displayRowCheckbox={false}&gt;
    &lt;TableRow&gt;
      &lt;TableRowColumn&gt;&lt;img src={Check} alt="Check" className="Check"/&gt;
  &lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;12N35, 22 March 2017&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;&lt;img src={Master} alt="Master" 
      className="Master"/&gt;MasterCard...4483&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;Prestige Cosmetics, Total Intensity Eyeliner Long 
      Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)
     &lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;$912.51&lt;/TableRowColumn&gt;
    &lt;/TableRow&gt;
    &lt;TableRow&gt;
      &lt;TableRowColumn&gt;&lt;img src={Check} alt="Check" className="Check"/&gt;
     &lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;12N35, 22 March 2017&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;&lt;img src={Paypal} alt="Paypal" className="Paypal"/&gt;PayPal&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;$912.51&lt;/TableRowColumn&gt;
    &lt;/TableRow&gt;
    &lt;TableRow&gt;
      &lt;TableRowColumn&gt;&lt;img src={Check} alt="Check" className="Check"/&gt;&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;12N35, 22 March 2017&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;&lt;img src={Visa} alt="Visa" className="Visa"/&gt;VISA...1532&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;$912.51&lt;/TableRowColumn&gt;
    &lt;/TableRow&gt;
    &lt;TableRow&gt;
      &lt;TableRowColumn&gt;&lt;img src={Fail} alt="Fail" className="Fail"/&gt;&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;12N35, 22 March 2017&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;&lt;img src={Visa} alt="Visa" className="Visa"/&gt;VISA...1532&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;$912.51&lt;/TableRowColumn&gt;
    &lt;/TableRow&gt;
    &lt;TableRow&gt;
       &lt;TableRowColumn&gt;&lt;img src={Check} alt="Check" className="Check"/&gt;&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;12N35, 22 March 2017&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;&lt;img src={Master} alt="Master" className="Master"/&gt;MasterCard...4483&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)&lt;/TableRowColumn&gt;
      &lt;TableRowColumn&gt;$912.51&lt;/TableRowColumn&gt;
    &lt;/TableRow&gt;
   &lt;/TableBody&gt;
   &lt;/Table&gt;
   );
   }
   }
   export default PaymentTable;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>  .table {
     width: 1200px;
     }
  </code></pre>
  
  <p>** Edit **</p>
  
  <p>I edited as per advice. Now, the width was widened but it does not cover the width of window. Instead, a slide bar appeared below the table..
  <a href="https://i.stack.imgur.com/oiOPr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oiOPr.png" alt="enter image description here"></a></p>