height设置无效的首要原因是默认padding撑高，应先清空td/th的padding并配合line-height锁高；tr的height被忽略因规范不支持，需将高度控制下放到td/th；内容含图片或多行时需用max-height、table-layout:fixed等方案保障稳定。
直接给 <td> 设 <code>height 但没生效？先关掉默认 padding
浏览器对 <td> 的 <code>height 支持是稳定的，但默认的上下 padding（通常是 2px）会把实际高度撑高。比如设了 height: 40px，加上 padding 后可能变成 44px，还容易触发内容溢出。
实操建议：
- 统一清空单元格内边距：
td, th { padding: 0; } - 再设
height和line-height（值相等），单行文本就能垂直居中且高度锁死 - 避免同时设
border和box-sizing: content-box——边框会额外加高，改用box-sizing: border-box
tr 上写 height 为什么经常被忽略？
Chrome 完全不响应 <tr> 的 <code>height 属性，Firefox 表现也不一致。W3C 规范里 <tr> 本就不该承担尺寸控制职责，它只是容器语义节点。
<p>常见错误现象：</p>
<ul><li>写了 <code><tr height="60"> 或 <code>style="height:60px"，但高度还是由内容撑开
tr 高度异常，其实是被某一个 <td> 的 <code>height 拉齐了整行
正确做法：把高度逻辑全部下放到 <td> 或 <code><th>，<code><tr> 只管结构，不管尺寸。
<h3>内容换行或含图片时，<code>height + line-height 失效怎么办？
line-height 只控制文本行距，对图片、块级子元素、多行文字无约束力。一旦单元格里有 <img> 或 <div>，高度立刻突破设定值。
<p>实操建议：</p>
<ul>
<li>纯文本单行：用 <code>height: 40px; line-height: 40px; overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 配合 max-height
<img> 设 max-height: 100%; height: auto;，并确保父 <td> 有 <code>vertical-align: top 防底部留白
动态渲染表格时，高度跳变怎么防？
JS 插入表格后，字体加载、图片解码、font-display 等都会导致单元格瞬间“弹高”，尤其在 SSR 或 hydration 初期。
关键点：
- 提前占位：
<td style="min-height: 40px;"> 比 <code>height更安全，能防内容未就绪时塌陷 - 图片必须带
width和height属性（或 CSS 尺寸），否则加载完成前无法预留空间 - 避免用
table-layout: auto—— 改为table-layout: fixed，配合width显式定义列宽，让浏览器跳过重排计算
真正难的不是设一个数字，而是让这个数字在各种内容、字体、加载时机下都稳得住。大部分“高度不对”问题，根源不在 height 写没写，而在 padding、box-sizing、vertical-align 和内容形态没对齐。
