antd表格列宽问题答案

【问题标题】：Antd table column width issueantd表格列宽问题
【发布时间】：2020-07-26 05:13:25
【问题描述】：

我在项目中使用antd table，当表格中有很多列无法单帧显示时，经常使用水平滚动。每列的宽度已定义。它在前几天工作正常，但现在我遇到了列宽问题。 如果我不对每一列应用省略号，列宽将无法正常工作。有没有办法解决它而不是为每列单独使用省略号？

    const tableColumns = () => { 
return [
        {
          title: 'col one',
          dataIndex: 'throws',
          key: 'throws',
          width:110,
          ellipsis: true,
          sorter: (a, b) => stringValueSort(a.throws, b.throws),
        },
        {
          title: 'col two',
          dataIndex: 'bats',
          key: 'bats',
          width:90,
          ellipsis: true,
          sorter: (a, b) => stringValueSort(a.bats, b.bats),
        },
      ] 
    };

如果我使用 ellipsis: true 属性列的宽度会根据列中的文本内容自动调整。使用此 width 属性仍未应用列的宽度。

【问题讨论】：

请分享您的代码
现在为上述问题添加代码
你的问题都是关于滚动，然后设置高度和宽度。然后检查结果
是的，已修复。以前我使用滚动作为布尔值，但现在我已经给出了以像素为单位的滚动宽度，并且列宽的问题是固定的。谢谢

标签： width antd ellipsis column-width ant-design-pro

【解决方案1】：

.antd-table-custom-class thead th, .antd-table-custom-class tbody td {
 white-space:pre-wrap;
 text-overflow: ellipsis
}

如果您想查看全文，请

.antd-table-custom-class thead th, .antd-table-custom-class tbody 
 td
 {    white-space: nowrap;
      word-break:break-word;
      word-break: break-all
 }

【讨论】：

.antd-table-custom-class thead th, .antd-table-custom-class tbody td { white-space: nowrap;断字：断字；断词：打破所有}