如何在Antd Table中仅修改指定行的高度？

方法1：利用Antd Table的rowClassName属性（最直接） #

Antd Table提供了rowClassName属性，支持传入函数动态为每行生成类名。结合Tailwind的高度类，直接判断is_special字段即可：

<Table
  dataSource={yourDataSource}
  columns={yourColumns}
  // 根据行数据的is_special字段返回对应Tailwind类
  rowClassName={(record) => record.is_special ? 'h-6' : 'h-10'}
  // 注：h-6对应24px高度，h-10对应40px，可根据需求替换成其他Tailwind高度类
/>

方法2：控制单元格高度（解决行高不生效的场景） #

如果Antd默认的行样式覆盖了自定义高度，可直接给列配置单元格类名，配合内边距类精准控制：

const columns = [
  {
    title: '内容',
    dataIndex: 'content',
    // 为每个单元格动态设置类名
    className: (record) => record.is_special ? 'h-6 py-1' : 'h-10 py-2'
  },
  // 其他列重复该配置即可
];

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

方法3：自定义行内联样式（备选） #

如果需要更灵活的像素控制，也可以用rowStyle属性：

<Table
  dataSource={yourDataSource}
  columns={yourColumns}
  rowStyle={(record) => record.is_special ? { height: '24px' } : { height: '40px' }}
/>

注意事项 #

• 确保Tailwind配置文件（tailwind.config.js）的content字段包含Antd Table的相关文件，避免样式被 purge：

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/antd/dist/antd.js' // 或按需引入的Antd组件路径
  ],
  // 其他配置项
};

• 若遇到样式优先级问题，可给Tailwind类添加!important前缀（如!h-6），但建议优先通过调整类的顺序解决。

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