如何修改AntD Pro Table展开列「+」的宽度？

问题 #

在AntD Pro Table中添加可展开行后，带「+」图标的展开列宽度过大，无法调整。尝试以下CSS代码未生效：

.ant-pro-table .ant-table-thead > tr > th .ant-table-row-expand-icon-cell {
     width: 5px!important;
     padding: 1px!important;
      }

（示例说明：表格最左侧的展开列占用了过多横向空间，与其他列比例失衡）

解决方法 #

1. 修正CSS选择器 #

原选择器层级错误，.ant-table-row-expand-icon-cell是.ant-table-thead > tr > th的直接子元素，中间不应加空格。同时需要覆盖表头和表体的展开列样式，确保生效：

/* 统一设置展开列的宽度和内边距 */
.ant-pro-table .ant-table-row-expand-icon-cell {
  width: 30px !important; /* 根据实际需求调整数值 */
  padding: 0 8px !important;
}

/* 可选：调整展开图标大小，防止宽度不足时截断 */
.ant-pro-table .ant-table-row-expand-icon {
  font-size: 14px;
}

2. 提升样式优先级（若上述代码无效） #

如果样式仍不生效，可通过组件自定义类名提升选择器优先级：

/* 假设给Pro Table添加了custom-expand-table类名 */
.custom-expand-table.ant-pro-table .ant-table-row-expand-icon-cell {
  width: 30px !important;
  padding: 0 8px !important;
}

在组件中添加类名：

<ProTable
  className="custom-expand-table"
  // 其他配置项
/>

3. 检查列配置冲突 #

确认columns配置中未对展开列手动设置宽度（Pro Table会自动生成展开列，手动配置宽度可能导致冲突）。

内容的提问来源于stack exchange，提问作者Alex Tuiasosopo