根本原因是浏览器对的height属性支持极差（Chrome忽略、Firefox不稳定），而/才是参与盒模型计算的单元格元素；应使用height: 40px; line-height: 40px; vertical-align: middle; box-sizing: border-box; padding: 0组合锁死单行视觉高度，内容可能换行时改用min-height，并避免依赖高度设置。

直接给 <td> 和 <code><th> 设 <code>height + <code>line-height

行高不一致，根本原因常是浏览器对

<tr> 的 <code>height 属性支持极差（Chrome 忽略、Firefox 行为不稳定），而 <code><td>/<code><th> 才是真正参与盒模型计算的单元格元素。</p>
<ul>
<li>用 <code>height: 40px; line-height: 40px; vertical-align: middle; box-sizing: border-box;

组合，能稳定锁住单行视觉高度，并垂直居中文本

若内容可能换行，把 height 改成 <code>min-height: 40px，避免截断

务必清空默认 padding：加 padding: 0，否则

height 会被撑开</li>
<li>不要依赖 <code>tr { height: 40px }

—— 它在多数场景下只是“建议”，不是强制约束

用 table-layout: fixed 切断内容撑高逻辑

当某列含长文本或图片导致整列变宽、进而拉高其他行时，table-layout: fixed 能让表格按列宽声明（如 width 或 CSS col）提前分配空间，不再被内容反向驱动。

• 在 table 上加 table-layout: fixed; width: 100%（必须设宽度，否则 fixed 失效）
• 配合 col 元素或 th:first-child { width: 200px } 显式控制列宽
• 此时 td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 才能真正生效
• 注意：fixed 布局下，width 百分比值可能被忽略，优先用 px 或 fr（需搭配 grid 替代方案）

修复 Firefox 中

<thead> 被均分高度的异常</H3>
<p>当 <code>table { height: 100% }

时，Firefox 会把

<thead> 和 <code><tbody> 在垂直方向上强行均分父容器高度；Chrome 则按内容自然撑高 <code><thead>。这不是 bug，是规范实现差异。</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
                                                                                src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
                                                                        <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur</p>
                                                                </div>
                                                                <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
<ul>
<li>别碰 <code>thead { height: auto }

—— 在百分比高度 table 中它无效

正确做法：只约束 <th> 的基础高度，例如 <code>th { height: 1.5em; vertical-align: middle; }

1.5em 是最小基准，允许多行文本自然扩展，不截断也不拉伸

如果表头需固定像素高度（如 36px），用 th { min-height: 36px; line-height: 36px; } 更安全

动态渲染时防跳变：用 min-height 替代 height

Vue/React 渲染表格、或异步加载数据后插入行时，height 会导致布局抖动：初始无内容 → 高度塌缩 → 内容注入 → 突然撑开。用户看到的是“闪一下”。

立即学习“前端免费学习笔记（深入）”；

• 对 td 和 th 统一设 min-height: 40px，再配 line-height: 40px 和 vertical-align: middle
• 图片未加载完前，用 img { display: block; min-height: 40px; } 占位
• 字体加载中（font-display: swap）时，line-height 可能跳变，所以推荐用 em 或 rem 值而非固定 px
• 避免在 tr 上写 height 或 min-height —— 表格行不是标准块级容器，行为不可控

实际重构时最易被忽略的是：你改了 td 的高度，但忘了重置 th；或者用了 table-layout: fixed 却没给 table 设宽度。这两处一漏，整张表就退回原始混乱状态。