Ant Design Table表格列标题默认左对齐失效靠右对齐问题问询

问题根因 #

Ant Design Table 内部会自动识别列内容类型，默认将数值、金额、百分比类列的表头和内容设置为右对齐，仅文本类首列默认左对齐；另外你在Table组件上写的align='center'是无效属性，Table组件本身不支持全局对齐配置，不会生效。

修复方法 #

方法1：批量统一配置所有列左对齐（推荐，无需逐个修改列配置） #

在现有列配置生成后通过map遍历统一追加align: 'left'属性，该属性会同时控制表头和对应列内容的对齐方式：

const tableColumns = [
  // 原有列配置保持不变
  {
    title: 'Round',
    dataIndex: 'round',
    width: 80,
  },
  {
    title: 'Date',
    dataIndex: 'date',
    width: 100,
  },
  // 剩余其余列配置保持不变
].map(col => ({
  ...col,
  align: 'left' // 统一给所有列加左对齐配置
}))

删除Table标签上无效的align='center'属性即可，修改后的组件调用代码：

<Table style={{marginTop:'20px'}} columns={tableColumns} dataSource={tableData} size="middle" />

方法2：单个列单独配置 #

如果只需要部分列左对齐，可以直接在对应列的配置项中添加align: 'left'即可，示例：

{
  title: 'Date',
  dataIndex: 'date',
  width: 100,
  align: 'left' // 单独指定该列左对齐
}

特殊情况：仅表头左对齐，内容保持原有对齐 #

如果不需要修改内容对齐，仅调整表头为左对齐，可以通过自定义表头类名实现：

1. 给列配置追加headerClassName

.map(col => ({
  ...col,
  headerClassName: 'table-header-left'
}))

2. 添加全局样式

.table-header-left {
  text-align: left !important;
}

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