如何修改Antd Table可展开"+"列宽度？解决相邻单元格样式异常

直接配置列宽度 #

在Table的columns数组里，给展开列指定width属性，同时可搭配fixed避免滚动时宽度异常：

const columns = [
  {
    title: '',
    dataIndex: '',
    width: 40, // 设置你需要的窄宽度
    fixed: 'left',
    render: (_, record) => <Table.ExpandableRow record={record} />,
  },
  // 其他列配置
];

覆盖默认样式（列配置不生效时用） #

如果通过列配置无法调整，用CSS精准覆盖展开列的默认样式，注意给Table加自定义类名避免全局污染：

<Table className="custom-expand-table" columns={columns} dataSource={data} />

对应的CSS：

.custom-expand-table .ant-table-cell.ant-table-cell-expand-icon {
  width: 40px !important;
  padding: 8px !important; /* 调整内边距适配窄宽度，防止图标溢出 */
}

/* 修复相邻单元格被挤压的问题 */
.custom-expand-table .ant-table-cell {
  min-width: unset !important;
}

避坑提示 #

• 不要直接修改Antd全局Table样式，自定义类名能避免影响其他页面的Table组件
• 若Table开启了scroll配置，确保展开列的宽度设置和滚动参数不冲突

内容的提问来源于stack exchange，提问作者100Pudof