ant design table column动态表头列宽自适应，解决文字过长往下掉问题

沐歌丨丶

已于 2022-10-25 10:53:08 修改

阅读量3k

点赞数 5

文章标签： react

于 2022-10-20 11:21:18 首次发布

本文链接：https://blog.csdn.net/muge1161105403/article/details/127423488

版权

某些场景下，我们的表头都是接口返回的，长度不定
也挺有意思的，几行就能解决自适应问题

需要在样式中添加如下：
  :global{
    .ant-table-container .ant-table-cell{
      white-space: nowrap;
    }
  }
  .tsx文件中添加一行
            <Table
            dataSource={dataSource}
            columns={columns}
            scroll={{ x: true }}//~~~~~~~~~~~~~~~~~~
            pagination={false}
          />