如何调整Antd Table中嵌套列的单元格高度？

1. 单个单元格自定义高度：通过render函数直接设置样式 #

如果只是需要给特定列的单元格设置对应高度，直接在columns的render回调里给单元格容器添加内联样式即可，同时可以用flex布局保证内容垂直对齐，匹配Excel的视觉效果：

// 假设从Excel解析到Item/Index列单元格高度为90px（对应3行），子级列高度为30px（对应1行）
const columns = [
  {
    title: 'Item',
    dataIndex: 'item',
    render: (text) => (
      <div style={{ height: '90px', display: 'flex', alignItems: 'center', padding: '0 8px' }}>
        {text}
      </div>
    ),
  },
  {
    title: 'Index',
    dataIndex: 'index',
    render: (text) => (
      <div style={{ height: '90px', display: 'flex', alignItems: 'center', padding: '0 8px' }}>
        {text}
      </div>
    ),
  },
  {
    title: '子级列1',
    dataIndex: 'child1',
    render: (text) => (
      <div style={{ height: '30px', display: 'flex', alignItems: 'center', padding: '0 8px' }}>
        {text}
      </div>
    ),
  },
  // 其他子级列同理配置
];

<Table columns={columns} dataSource={yourDataSource} bordered />

2. 跨行合并场景：结合rowSpan与高度控制 #

如果你的Excel结构是Item、Index单元格跨3行合并（对应3行高度），其他子级单元格每行独立显示，需要先处理单元格合并逻辑，再配合高度设置：

步骤1：给数据源添加合并标记 #

先给需要合并的行添加rowSpan标记，合并单元格的行设置跨度值，其余行设为0：

const data = [
  {
    key: '1',
    item: '商品A',
    itemRowSpan: 3,
    index: '001',
    indexRowSpan: 3,
    child1: '子项1',
  },
  {
    key: '2',
    item: '',
    itemRowSpan: 0,
    index: '',
    indexRowSpan: 0,
    child1: '子项2',
  },
  {
    key: '3',
    item: '',
    itemRowSpan: 0,
    index: '',
    indexRowSpan: 0,
    child1: '子项3',
  },
];

步骤2：在columns中配置合并与高度 #

const columns = [
  {
    title: 'Item',
    dataIndex: 'item',
    render: (text, record) => {
      // 仅合并单元格设置高度
      const cellStyle = record.itemRowSpan > 0 
        ? { height: '90px', display: 'flex', alignItems: 'center', padding: '0 8px' } 
        : {};
      return <td style={cellStyle} rowSpan={record.itemRowSpan}>{text}</td>;
    },
  },
  {
    title: 'Index',
    dataIndex: 'index',
    render: (text, record) => {
      const cellStyle = record.indexRowSpan > 0 
        ? { height: '90px', display: 'flex', alignItems: 'center', padding: '0 8px' } 
        : {};
      return <td style={cellStyle} rowSpan={record.indexRowSpan}>{text}</td>;
    },
  },
  {
    title: '子级列1',
    dataIndex: 'child1',
    render: (text) => (
      <div style={{ height: '30px', display: 'flex', alignItems: 'center', padding: '0 8px' }}>
        {text}
      </div>
    ),
  },
];

<Table columns={columns} dataSource={data} bordered />

3. 批量整行控制：利用rowClassName统一设置行高 #

如果某几行需要统一设置高度，可以通过rowClassName给不同行分配类名，再用CSS控制：

/* 全局或模块样式文件 */
.table-row-high {
  height: 90px;
}
.table-row-normal {
  height: 30px;
}
/* 配合单元格垂直居中 */
.table-row-high td, .table-row-normal td {
  display: flex;
  align-items: center;
  padding: 0 8px;
}

<Table
  columns={columns}
  dataSource={data}
  // 根据数据源标记返回对应类名
  rowClassName={(record) => record.isHighRow ? 'table-row-high' : 'table-row-normal'}
/>

注意事项 #

• Antd Table默认会给单元格添加padding，如果需要完全匹配Excel的高度，可调整padding值（比如设为0）后再设置高度。
• 若使用CSS Modules，注意类名的正确引用方式。

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