本文详解如何通过 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，且该类作用于 <col> 元素（而非 <th> 或 <td>），属于表格列宽控制的关键节点。
✅ 正确的覆盖方式是直接定位 <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 这类路径选择器——它试图修饰单元格内容容器，但列宽由 <col> 决定，CSS 无法通过子元素反向影响 <col> 宽度；
- !important 在此场景下必要，因 Ant Design 内部通过内联 width 或高优先级样式控制 <col>；
- 若同时使用 scroll.x 或固定列（fixed: 'left'），需额外验证该列是否被横向滚动影响，可配合 table { table-layout: fixed; } 提升稳定性；
- 实际项目中建议将该样式置于全局 CSS 或 ProTable 组件的 className 对应样式文件中，避免污染全局。
? 进阶提示：如需进一步定制图标（如替换为 SVG、调整对齐或添加动画），可通过 expandable.expandIcon 属性传入自定义 ReactNode，并结合 expandable.expandedRowRender 实现完全可控的展开体验——此时列宽仍需上述 <col> 规则保障布局稳定。
最终效果：展开列宽度严格收敛至设定值（如 24px），整体表格更紧凑、视觉更专业，且兼容 ProTable 的所有扩展能力（如搜索、分页、工具栏联动等）。
