优先给设height+line-height+box-sizing:border-box并清空padding；避免在设height；单行用line-height锁高，多行需max-height或flex；废弃cellspacing/cellpadding，改用css padding；动态渲染时用图片尺寸、font-display和min-height防跳变。
table 行高被内容撑开，height 不生效怎么办
直接设 height 在 <tr> 或 <code><td> 上经常没反应，是因为默认的 <code>box-sizing 是 content-box，而表格单元格的渲染还受 vertical-align 和 line-height 影响。更关键的是：浏览器对 <tr> 的 <code>height 属性支持不一致（chrome 会忽略，firefox 可能部分生效）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先给
<td> 或 <code><th> 设 <code>height+line-height（两者值相等可居中单行文本） - 加
box-sizing: border-box避免 padding 撑高 - 禁用默认上下内边距：
padding: 0，否则height容易被突破 - 避免在
<tr> 上写 <code>height—— 它不是标准支持属性，靠不住CSS
line-height控制单行高度最稳，但多行就失效line-height对纯文本内容的行高控制最直接，尤其适合固定行高的数据表格（比如后台列表）。但它只管“行距”，不约束容器整体高度；一旦内容换行或含图片，line-height就不再决定最终单元格高度。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单行文本场景下，设
line-height: 40px+height: 40px+overflow: hidden组合，能锁死视觉高度 - 多行内容必须用
max-height+display: -webkit-box截断，或改用flex布局重写单元格结构 - 注意
line-height的值如果是无单位数字（如1.5），会继承父级字体大小计算，容易失控 —— 推荐用px或em
用
border-collapse: collapse后，cellspacing和cellpadding还管用吗html 属性
cellspacing和cellpadding已废弃，且在border-collapse: collapse下完全失效 —— 此时单元格之间没有间隙，cellspacing失去意义；而cellpadding会被paddingCSS 覆盖。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
cellspacing/cellpaddingHTML 属性，统一用 CSS 控制：td, th { padding: 8px 12px } - 保持
border-collapse: collapse可减少意外高度波动（分离模式下边框双倍叠加会影响布局） - 如果真需要“隔开”行，不要调
cellspacing，改用border-bottom配合透明间隙，或给<tr> 加 <code>margin-bottom（需配合display: block，但会破坏表格语义）React/Vue 里动态渲染表格，高度忽高忽低怎么锁定
框架里常见问题：数据异步加载后，字体还没加载完、图片未占位、或者组件重绘触发 layout shift，导致表格行高跳变。这不是 CSS 写错了，而是渲染时机和资源加载节奏没对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
height和width属性（或 CSS 尺寸），避免加载后重排 - 用
font-display: swap减少字体加载期间的尺寸抖动 - 服务端/骨架屏阶段先用固定
min-height占位，例如td { min-height: 40px } - 避免在
td里嵌套div+display: flex布局又不设height—— flex 容器默认不收缩，容易撑高整行
表格高度真正难控的点不在“怎么设”，而在“谁在偷偷改”。字体、图片、内联元素、甚至 emoji 渲染差异，都可能让
height形同虚设。盯住computed style里的height和actual height差值，比反复调 CSS 更有效。 - 给图片加
- 单行文本场景下，设