本文介绍如何精准调整 ant design pro table 中可展开行（expandable）左侧“+”图标列的宽度，解决默认宽度过大、css 无法生效的问题，并提供稳定可靠的样式覆盖方案。

本文介绍如何精准调整 ant design pro table 中可展开行（expandable）左侧“+”图标列的宽度，解决默认宽度过大、css 无法生效的问题，并提供稳定可靠的样式覆盖方案。

在使用 Ant Design Pro 的 组件并启用 expandable 功能时，系统会自动插入一列用于触发行展开/收起的“+”/“−”图标。该列默认宽度较宽（通常约 50px），且由于其 DOM 结构嵌套较深、类名动态生成，直接通过 .ant-table-row-expand-icon-cell 等常见选择器往往无法生效。

根本原因在于：Ant Design 内部为展开列生成了具有特定语义的

元素（而非仅靠 样式控制），其 class 为 ant-table-expand-icon-col。该 标签位于 中，负责整列的宽度计算，因此必须针对 元素本身设置样式，而非其内部的单元格。

✅ 正确解决方案如下：

/* 推荐：全局或局部样式中添加 */
col.ant-table-expand-icon-col {
  width: 24px !important; /* 建议值：24px 可容纳图标且留有余量 */
}

⚠️ 注意事项：

• 必须使用 col.ant-table-expand-icon-col 选择器，这是 Ant Design 表格底层渲染生成的标准 类名；
• !important 在多数场景下仍需保留，以确保覆盖组件内置的内联宽度（如 style="width: 50px"）；
• 宽度不宜过小（如
• 若使用 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;
}

综上，精准定位

元素并设置 width 是最稳定、最符合 Ant Design 渲染逻辑的解决方案，已验证兼容 v5.x 及 ProTable v5.30+ 版本。