如何为Ant Design表格列设置minWidth与maxWidth

直接在表格的列配置项中添加maxWidth和minWidth属性即可实现需求，以下是具体示例：

import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: string;
  name: string;
  address: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    minWidth: 120, // 列最小宽度
    maxWidth: 200, // 列最大宽度
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    minWidth: 200,
    maxWidth: 400,
    ellipsis: true, // 配合宽度限制，内容超出时显示省略号
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: '张三',
    address: '北京市朝阳区建国路88号某大厦1234室',
  },
  {
    key: '2',
    name: '李四',
    address: '上海市浦东新区张江高科技园区博云路2号某创新中心5678室',
  },
];

const App = () => <Table columns={columns} dataSource={data} />;

export default App;

• 设置minWidth后，列宽度不会小于该值，窗口缩小到一定程度时会触发表格横向滚动
• 设置maxWidth后，列宽度不会超过该值，内容超出时可配合ellipsis: true自动显示省略号
• 若同时设置width，列会优先以width为初始宽度，在窗口尺寸变化时，宽度会在minWidth和maxWidth的范围内自适应调整

内容的提问来源于stack exchange，提问作者Supriya Kumari