如何设置antd可展开表格的展开图标列最小宽度？

• 版本兼容性校验：expandable.columnWidth 仅在 antd v4.17.0 及以上版本支持，低于该版本时属性本身不生效，需直接使用CSS覆盖方案。
• 修正Table布局配置：Table默认使用auto自适应布局，会根据内容自动调整列宽，手动设置的宽度可能被覆盖，将tableLayout设为fixed后自定义列宽会优先生效，同时注意columnWidth不要设置过小（最小30px左右刚好容纳展开图标，设置1px会被默认最小宽度规则覆盖）：

<Table
  tableLayout="fixed"
  expandable={{
    expandedRowRender: record => <p style={{ margin: 0 }}></p>,
    columnWidth: 30,
    expandRowByClick: true,
  }}
  // 其他Table配置项
/>

如果以上调整后仍不生效，可使用以下强制覆盖方案：

方案1：自定义CSS覆盖 #

antd展开图标列固定使用类名.ant-table-expand-icon-col，直接覆盖该类的宽高、内边距规则即可，如需局部生效可添加父级类名限制，避免全局样式污染：

/* 局部生效示例，外层父容器类名为custom-table */
.custom-table .ant-table-expand-icon-col {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
}

给Table外层套上对应类名即可：

<div className="custom-table">
  <Table {/* 你的Table配置 */} />
</div>

方案2：antd v5 全局主题配置 #

如果使用antd v5版本，可直接通过ConfigProvider的主题配置统一修改展开列宽度，无需自定义CSS：

import { ConfigProvider } from 'antd';

<ConfigProvider
  theme={{
    components: {
      Table: {
        expandIconColumnWidth: 30,
      },
    },
  }}
>
  {/* 你的应用代码 */}
</ConfigProvider>

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