React-Tableカラムの固定幅がテーブル全体を台無しにします

Question

なぜ私はこれを固定幅に設定できないのですか名前：カラム？これは設定された幅ですが、テーブル全体を台無しにします。列は他の列が表示されます。これはフリーボックスのためですか？私はフレックスボックスに精通していません。誰がタグにreact-tableを追加することができた場合

var ReactTable = ReactTable.default 
 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    }; 
 
    } 
 
    render() { 
 
    const { data } = this.state; 
 
    return (
 
     <div> 
 
     <ReactTable 
 
      data={data} 
 
      columns={[ 
 
      { 
 
       Header: "Name", 
 
       columns: [ 
 
       { 
 
        width:'50', 
 
        Header: "First Name", 
 
        accessor: "firstName" 
 
       }, 
 
       { 
 
        Header: "Last Name", 
 
        id: "lastName", 
 
        accessor: d => d.lastName 
 
       } 
 
       ] 
 
      }, 
 
      { 
 
       Header: "Info", 
 
       columns: [ 
 
       { 
 
        Header: "Age", 
 
        accessor: "age" 
 
       }, 
 
       { 
 
        Header: "Status", 
 
        accessor: "status" 
 
       } 
 
       ] 
 
      }, 
 
      { 
 
       Header: 'Stats', 
 
       columns: [ 
 
       { 
 
        Header: "Visits", 
 
        accessor: "visits" 
 
       } 
 
       ] 
 
      } 
 
      ]} 
 
      defaultPageSize={10} 
 
      className="-striped -highlight" 
 
     /> 
 
     <br /> 
 

 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("app"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script> 
 

 
<div id="app"></div>

私は喜んでいるでしょう。

Answer 1

私が反応するテーブルについて多くを知っているが、それを行うだろう引用符

var ReactTable = ReactTable.default 
 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    }; 
 
    } 
 
    render() { 
 
    const { data } = this.state; 
 
    return (
 
     <div> 
 
     <ReactTable 
 
      data={data} 
 
      columns={[ 
 
      { 
 
       Header: "Name", 
 
       columns: [ 
 
       { 
 
        Header: "First Name", 
 
        accessor: "firstName", 
 
        width: 50 
 
       }, 
 
       { 
 
        Header: "Last Name", 
 
        id: "lastName", 
 
        accessor: d => d.lastName 
 
       } 
 
       ] 
 
      }, 
 
      { 
 
       Header: "Info", 
 
       columns: [ 
 
       { 
 
        Header: "Age", 
 
        accessor: "age" 
 
       }, 
 
       { 
 
        Header: "Status", 
 
        accessor: "status" 
 
       } 
 
       ] 
 
      }, 
 
      { 
 
       Header: 'Stats', 
 
       columns: [ 
 
       { 
 
        Header: "Visits", 
 
        accessor: "visits" 
 
       } 
 
       ] 
 
      } 
 
      ]} 
 
      defaultPageSize={10} 
 
      className="-striped -highlight" 
 
     /> 
 
     <br /> 
 

 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("app"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script> 
 

 
<div id="app"></div>

Answer 2

私はreact-tableについてよく分かりませんが、widthをすべての列に設定することでこれを解決できます。

var ReactTable = ReactTable.default 
 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    }; 
 
    } 
 
    render() { 
 
    const { data } = this.state; 
 
    return (
 
     <div> 
 
     <ReactTable 
 
      data={data} 
 
      columns={[ 
 
      { 
 
       Header: "Name", 
 
       columns: [ 
 
       { 
 
        width:'50', 
 
        Header: "First Name", 
 
        accessor: "firstName" 
 
       }, 
 
       { 
 
        width:'100', 
 
        Header: "Last Name", 
 
        id: "lastName", 
 
        accessor: d => d.lastName 
 
       } 
 
       ] 
 
      }, 
 
      { 
 
       Header: "Info", 
 
       columns: [ 
 
       { 
 
        width:'100', 
 
        Header: "Age", 
 
        accessor: "age" 
 
       }, 
 
       { 
 
        width:'100', 
 
        Header: "Status", 
 
        accessor: "status" 
 
       } 
 
       ] 
 
      }, 
 
      { 
 
       Header: 'Stats', 
 
       columns: [ 
 
       { 
 
        width:'100', 
 
        Header: "Visits", 
 
        accessor: "visits" 
 
       } 
 
       ] 
 
      } 
 
      ]} 
 
      defaultPageSize={10} 
 
      className="-striped -highlight" 
 
     /> 
 
     <br /> 
 

 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("app"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script> 
 

 
<div id="app"></div>