ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
92.49k stars 49.78k forks source link

table 无法同时使用 minWidth 和ellipsis 属性 #51574

Open Leo-LL opened 2 days ago

Leo-LL commented 2 days ago

Reproduction link

Edit on StackBlitz

Steps to reproduce

  1. 将屏幕宽度缩小至一半,为 table 设置 scroll.x 为 100%
    const App: React.FC = () => (
    <Table<DataType>
    columns={columns}
    dataSource={data}
    tableLayout="auto"
    scroll={{ x: '100%' }}
    />
    );
  2. 设置 column 属性,minWidth 和ellipsis
    {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    minWidth: 150,
    ellipsis: true
    },

What is expected?

minWidth 属性的作用应该是:当屏幕宽度大于 table 内容总宽度,设置 minWidth 的列应该平均分配宽度;当屏幕宽度小于 table 内容总宽度,设置 minWidth 的列的宽度应该是 minWidth 的值。

What is actually happening?

列宽度永远大于minWidth值,无法使用ellipsis

Environment Info
antd 5.21.6
React 18.3.1
System Mac
Browser Chrome

我们的表格有个 comment 的列,设置了 minWidth 为 300,大部分comment 都可以显示,但有可能会出现很长的 comment。我们会希望 comment 列的内容不要使得 table 变形。

stackblitz[bot] commented 2 days ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

fliu2476 commented 1 day ago

ellipsis属性依赖于宽度约束,如果你只设置了最小宽度,ellipsis是根本不会生效的吧