antd 的 table 列数较多时每一列设置的宽度不生效

表格列的配置数据

const columns = [
  { title: '名称', dataIndex: 'name', width: 110 },
  { title: '年龄', dataIndex: 'age', width: 110 },
  { title: '性别', dataIndex: 'sex', width: 110 },
  { title: '地址', dataIndex: 'address', width: 220 },
  { title: '地址1', dataIndex: 'address1', width: 220 },
  { title: '地址2', dataIndex: 'address2', width: 220 },
  { title: '地址3', dataIndex: 'address3', width: 220 },
  { title: '地址4', dataIndex: 'address3', width: 220 },
  { title: '地址5', dataIndex: 'address3', width: 220 },
  { title: '地址6', dataIndex: 'address3', width: 220 },
  { title: '地址7', dataIndex: 'address3', width: 220 },
  { title: '地址8', dataIndex: 'address3', width: 220 },
  { title: '地址9', dataIndex: 'address3', width: 220 },
  { title: '地址10', dataIndex: 'address3', width: 220 },
  { title: '地址11', dataIndex: 'address3', width: 220 },
  { title: '地址12', dataIndex: 'address3', width: 220 },
  { title: '地址13', dataIndex: 'address3', width: 220 },
  { title: '地址14', dataIndex: 'address3', width: 220 },
  { title: '地址15', dataIndex: 'address3', width: 220 },
  { title: '地址16', dataIndex: 'address3', width: 220 },
  { title: '地址17', dataIndex: 'address3', width: 220 },
  { title: '地址18', dataIndex: 'address3', width: 220 },
  { title: '地址19', dataIndex: 'address3', width: 220 },
  { title: '地址20', dataIndex: 'address3', width: 220 },
]

当列数较多时设置的每一列的宽度不生效被挤压

<Table
  columns={columns}
  dataSource={data}
/>

可以通过设置table的scroll属性正常显示每一列

将scroll属性的x值设置为max-content每一列的宽度可以按照设置的宽度正常显示，设置成 '100%' 或者 true 无法达到期望效果。

<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 'max-content' }}
/>