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

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

作者: 楠楠_c811 | 来源:发表于2019-07-04 15:36 被阅读0次
  1. antd中表格组件的表头和表格体对齐
  2. react新手入门教程03-纯前端渲染table+弹窗
  3. 2017.9.4
  4. table
  5. HTMl-表格
  6. element-ui的table表格控件表头与内容列不对齐问题
  7. 表格以及流程图的制作
  8. html5表格标签
  9. Markdown表格语法
  10. Antd中的Table数据异步动态加载性能优化
  11. 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>
          )
        }
    }
    

    相关文章

    表格 格式: 表格标签: ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...

  12. Markdown表格语法

    表格 表头1表头2表头3表头4A1B1C1D1A2B2C2D2 列的对齐方式如下:| -----:[1] | :-...

  13. Antd中的Table数据异步动态加载性能优化

    需求 利用Antd的Table组件可以实现表格的展示,表格数据是动态增加的,并且表格数据的请求为异步请求。当数据条...

  14. 网友评论

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

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