class Home extends React.Component {
render() {
const dataSource = [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}];
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];
return (
<div>
<div>Home</div>
<Table dataSource={dataSource} columns={columns}/>
</div>
);
}
}
Table里没加scroll属性之前,是能对齐的,如下图
当在Table里加了scroll属性之后
<Table dataSource={dataSource} columns={columns} scroll={{y:600}}/>
变成了这样,错开了
这个时候,在columns里,每一项都添加一个width属性,而且这个属性的值最好是百分比
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
width:'33%'
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
width:'33%'
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
width:'33%'
}];
这样,表格就正常显示了