antd的表格组件中,如果表格内内容比较多,容易出现表头和表格体不对齐的问题,解决方法很简单,需要直接把表格头固定宽,这样下面表格体会自动对齐。
图片效果是教学视频截取的,感兴趣的可以自己动手试一试就明白了。
表格头的宽度直接设置在数据源中即可。
export default class TableList extends React.Component {
constructor(props) {
super(props)
this.state = {
// box: true,
}
}
render() {
// 表格数据源
const columns = [
{
title: '币种',
dataIndex: 'name',
key: 'name',
width:150,// 这是表格头的宽度,用来对齐表格头和表格体
}
]
return(
<div>
<Table columns={columns} />
</div>
)
}
}
网友评论