本文详解如何通过 css 精准控制 ant design pro table 中可展开行（expandable）左侧“+”图标的列宽，解决默认宽度过大、无法响应式收缩的问题。

本文详解如何通过 css 精准控制 ant design pro table 中可展开行（expandable）左侧“+”图标的列宽，解决默认宽度过大、无法响应式收缩的问题。

在使用 Ant Design Pro Table 时，启用 expandable 配置后，框架会自动插入一列用于显示展开/收起图标的单元格（即带“+”或“−”的列）。该列默认宽度由内部样式控制，直接通过 .ant-table-row-expand-icon-cell 等嵌套选择器修改往往无效——因为其实际 DOM 结构中，该列被赋予了类名 ant-table-expand-icon-col，且该类作用于

元素（而非 或 ），属于表格列宽控制的关键节点。

✅ 正确的覆盖方式是直接定位

元素：

/* 推荐：精准命中 expand icon 所在的 col */
col.ant-table-expand-icon-col {
  width: 24px !important; /* 建议设为 24px 或 32px，兼容图标尺寸与点击区域 */
  min-width: 24px !important;
}

⚠️ 注意事项：

• 不要使用 .ant-pro-table .ant-table-thead > tr > th .ant-table-row-expand-icon-cell 这类路径选择器——它试图修饰单元格内容容器，但列宽由 决定，CSS 无法通过子元素反向影响 宽度；
• !important 在此场景下必要，因 Ant Design 内部通过内联 width 或高优先级样式控制 ；
• 若同时使用 scroll.x 或固定列（fixed: 'left'），需额外验证该列是否被横向滚动影响，可配合 table { table-layout: fixed; } 提升稳定性；
• 实际项目中建议将该样式置于全局 CSS 或 ProTable 组件的 className 对应样式文件中，避免污染全局。

? 进阶提示：如需进一步定制图标（如替换为 SVG、调整对齐或添加动画），可通过 expandable.expandIcon 属性传入自定义 ReactNode，并结合 expandable.expandedRowRender 实现完全可控的展开体验——此时列宽仍需上述

规则保障布局稳定。

最终效果：展开列宽度严格收敛至设定值（如 24px），整体表格更紧凑、视觉更专业，且兼容 ProTable 的所有扩展能力（如搜索、分页、工具栏联动等）。