美文网首页工作生活
antd中表格组件的表头和表格体对齐

antd中表格组件的表头和表格体对齐

作者: 楠楠_c811 | 来源:发表于2019-07-04 15:36 被阅读0次

    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>
          )
        }
    }
    

    相关文章

      网友评论

        本文标题:antd中表格组件的表头和表格体对齐

        本文链接:https://www.haomeiwen.com/subject/szcrhctx.html