根本原因是浏览器对的height属性支持极差（Chrome忽略、Firefox不稳定），而/才是参与盒模型计算的单元格元素；应使用height: 40px; line-height: 40px; vertical-align: middle; box-sizing: border-box; padding: 0组合锁死单行视觉高度，内容可能换行时改用min-height，并避免依赖高度设置。
直接给 和 设 height + line-height
行高不一致，根本原因常是浏览器对
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
height 属性支持极差（Chrome 忽略、Firefox 行为不稳定），而 / 才是真正参与盒模型计算的单元格元素。
用 height: 40px; line-height: 40px; vertical-align: middle; box-sizing: border-box; 组合，能稳定锁住单行视觉高度，并垂直居中文本
若内容可能换行，把 height 改成 min-height: 40px，避免截断
务必清空默认 padding：加 padding: 0，否则 height 会被撑开
不要依赖 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 中 被均分高度的异常
当 table { height: 100% } 时，Firefox 会把 和 在垂直方向上强行均分父容器高度；Chrome 则按内容自然撑高 。这不是 bug，是规范实现差异。
别碰 thead { height: auto } —— 在百分比高度 table 中它无效
正确做法：只约束 的基础高度，例如 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 设宽度。这两处一漏，整张表就退回原始混乱状态。
设 height + line-height
行高不一致，根本原因常是浏览器对
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
height 属性支持极差（Chrome 忽略、Firefox 行为不稳定），而 / 才是真正参与盒模型计算的单元格元素。
用 height: 40px; line-height: 40px; vertical-align: middle; box-sizing: border-box; 组合，能稳定锁住单行视觉高度，并垂直居中文本
若内容可能换行，把 height 改成 min-height: 40px，避免截断
务必清空默认 padding：加 padding: 0，否则 height 会被撑开
不要依赖 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 中 被均分高度的异常
当 table { height: 100% } 时，Firefox 会把 和 在垂直方向上强行均分父容器高度；Chrome 则按内容自然撑高 。这不是 bug，是规范实现差异。
别碰 thead { height: auto } —— 在百分比高度 table 中它无效
正确做法：只约束 的基础高度，例如 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 设宽度。这两处一漏，整张表就退回原始混乱状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
