行高设置不生效主因是组件默认覆盖、虚拟滚动接管、CSS优先级不足及动态更新未触发重渲染。需检查rowHeight是否被忽略，手动设tr高度、重置padding、用key强制重渲染或调用resetRowHeights，并兼顾移动端触控体验。

行高设置不生效？检查 rowHeight 是否被表格组件默认值覆盖

很多 ui 库（如 ant design、element plus、ag grid）的表格默认启用「自动行高」或「最小行高限制」，直接设 rowheight 可能被忽略。尤其在使用虚拟滚动（virtual scroll）时，组件会强制接管行高计算。

实操建议：

React Native For Android 源码编译 中文WORD版

本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看

下载

• 确认你用的是支持自定义行高的版本（例如 AG Grid v29+ 的 rowHeight 需配合 suppressRowTransform: true）
• Ant Design 中，components.body.row 自定义渲染时，必须手动给 <tr> 加 <code>style={{ height: '24px' }}，仅设 rowHeight prop 无效
• 若用 CSS 控制，优先用 tbody tr 而非 table tr，避免被父级 min-height 拉高

CSS margin/padding 导致“看起来紧凑，实际没缩”

表格单元格（<td>）内部常含 <code>padding，而开发者只调了 line-height 或 height，结果行高没变，视觉上却卡顿、文字贴边甚至截断。

实操建议：

• 用浏览器开发者工具「检查元素」，看真实生效的 padding 值——很多组件库默认设 padding: 8px 12px
• 统一重置： td, th { padding: 2px 6px !important; }（!important 是为覆盖组件内联样式）
• 慎用 line-height: 1：它会让单行文本居中，但多行内容会重叠；紧凑场景推荐 line-height: 1.2 + 显式 height

React/Vue 中动态行高失效？注意数据更新触发机制

当通过状态更新（如 useState 或 ref）切换「紧凑/默认」模式时，表格组件未必重新计算行高——尤其用了 memo、shouldComponentUpdate 或未监听配置变更。

实操建议：

• Ant Design：rowHeight 是非响应式 prop，改完需触发 forceUpdate() 或用 key 强制重渲染（如 key={isCompact ? 'compact' : 'normal'}）
• Vue 3 + Element Plus：绑定 :row-style="{ height: isCompact ? '24px' : '40px' }" 比依赖 row-height 属性更可靠
• AG Grid：必须调用 api.resetRowHeights() 才能生效，不能只改 rowHeight 配置项

移动端适配下「紧凑」反而更难读？别硬压行高

把行高压到 20px 在桌面端看着干净，在手机上手指点选困难、文字挤在一起、iOS Safari 还可能因字体渲染差异导致行高跳变。

实操建议：

• 用媒体查询分层控制：@media (max-width: 768px) { td { padding: 4px 8px; } }
• 优先减 padding，而非砍 font-size 或 line-height；小字号在 Retina 屏上易发虚
• 留出至少 44px 触控热区：可通过 td::after { content: ''; display: block; height: 20px; } 补足点击区域，不影响视觉

行高不是越小越好，关键在「信息密度」和「操作容错」之间找平衡点；很多所谓“紧凑列表”，真正卡住体验的其实是 padding 和 hover/focus 样式残留。