CSS React-Table 列固定宽度破坏了整个表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46447713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Table column fixed width spoils whole table
提问by Jan Cio?ek
Can someone explain this to me why i cant set fixed width on First Namecolumn?It's setting passed width but it spoils whole table.If you tinker with resizing(by mouse) the column other columns will appear.Is this due to flebox?Im not familiar with flexbox.
有人可以向我解释为什么我不能在名字列上设置固定宽度吗？它设置了传递宽度，但它会破坏整个表格。如果你调整大小（通过鼠标），其他列将出现。这是由于 flebox 吗？我对 flexbox 不熟悉。
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>If anyone can add react-tableto the tags i will be glad.
如果有人可以添加react-table到标签，我会很高兴。
回答by x1x
I don't know much about react-table, but try to not use quotes
我对 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: [
{
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>回答by Supraja Ganji
I don't know much about react-table, but you can solve this by setting widthto all the columns.
我对 了解不多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>