title: Resize React Table
body: <p>I'm trying to build a webpage with a React Table and I cannot figure out how to resize the table such that it does not take up the whole page.  Is this something that needs to be done in CSS or can it be rendered in React?  I'm using create-react-app.  Thanks for the help.  Here are my App.js and App.css files:</p>
  
  <p>App.js:</p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
  
    const data = [{
      name: 'Tanner Linsley',
      age: 26,
      friend: {
        name: 'Jason Maurer',
        age: 23,
      }
    }]
  
    const columns = [{
      Header: 'Username/Email',
      accessor: 'name' // String-based value accessors!
    }, {
      Header: 'Risk Score',
      accessor: 'age',
      Cell: props =&gt; &lt;span className='number'&gt;{props.value}&lt;/span&gt; // Custom cell components!
    }, 
  
    {
      id: 'friendName', // Required because our accessor is not a string
      Header: 'Location',
      accessor: d =&gt; d.friend.name // Custom value accessors!
    }]
  
    return &lt;ReactTable
      data={data}
      columns={columns}
    /&gt;
    }
  }
  
  export default App;
  </code></pre>
  
  <p>App.css:</p>
  
  <pre><code>.App {
    text-align: center;
    label{
      font-size: 26px;
    }
  }
  
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
  }
  
  .App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
  }
  
  .App-link {
    color: #61dafb;
  }
  
  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  :local(.form) {
    font-size: 26px;
  }
  
  /*:local(.ReactTable) {
    border: 1px solid black; 
    overflow:auto;
  }*/
  </code></pre>