本文介绍如何精准调整 ant design pro table 中可展开行（expandable）左侧“+”图标列的宽度，解决默认宽度过大、css 无法生效的问题，并提供稳定可靠的样式覆盖方案。
本文介绍如何精准调整 ant design pro table 中可展开行（expandable）左侧“+”图标列的宽度，解决默认宽度过大、css 无法生效的问题，并提供稳定可靠的样式覆盖方案。
在使用 Ant Design Pro 的 <ProTable> 组件并启用 expandable 功能时，系统会自动插入一列用于触发行展开/收起的“+”/“−”图标。该列默认宽度较宽（通常约 50px），且由于其 DOM 结构嵌套较深、类名动态生成，直接通过 .ant-table-row-expand-icon-cell 等常见选择器往往无法生效。
根本原因在于：Ant Design 内部为展开列生成了具有特定语义的 <col> 元素（而非仅靠 <th> 样式控制），其 class 为 ant-table-expand-icon-col。该 <col> 标签位于 <colgroup> 中，负责整列的宽度计算，因此必须针对 <col> 元素本身设置样式，而非其内部的单元格。
✅ 正确解决方案如下：
/* 推荐：全局或局部样式中添加 */
col.ant-table-expand-icon-col {
width: 24px !important; /* 建议值：24px 可容纳图标且留有余量 */
}⚠️ 注意事项：
- 必须使用 col.ant-table-expand-icon-col 选择器，这是 Ant Design 表格底层渲染生成的标准 <col> 类名；
- !important 在多数场景下仍需保留，以确保覆盖组件内置的内联宽度（如 style="width: 50px"）；
- 宽度不宜过小（如 <16px），否则可能影响点击区域或图标显示；推荐 20–32px 区间；
- 若使用 CSS-in-JS（如 styled-components）或 CSS Modules，需确保该样式能穿透到表格根节点（可借助 :global() 或提升作用域）；
- 不建议修改 .ant-table-row-expand-icon 的 padding 或 margin 来“视觉压缩”，这易导致交互热区偏移或响应式异常。
? 进阶提示：若需进一步定制图标大小或对齐方式，可额外覆盖图标样式：
.ant-table-row-expand-icon::before {
font-size: 14px;
line-height: 1;
}综上，精准定位 <col> 元素并设置 width 是最稳定、最符合 Ant Design 渲染逻辑的解决方案，已验证兼容 v5.x 及 ProTable v5.30+ 版本。
