tr的height属性基本无效，因tr非标准盒模型容器，高度由td/th内容决定；须在td/th上组合设置height、line-height、box-sizing和padding才能精确锁死行高。

为什么的height属性基本没用

Chrome 完全忽略 tr 上的 height，Firefox 表现不稳定，Safari 仅部分响应。根本原因是 tr 不是标准渲染盒，它的高度由子元素（td/th）决定，不是靠自身样式控制。你写 ，只要单元格里加了 padding、字体变大、或内容换行，实际高度立刻突破。

• tr 只接受极少数样式（如 background），height、padding、margin 都不该放这儿
• DevTools 里看到 “Computed height” 没变，不是生效了，而是浏览器压根没处理这个声明
• 想统一整行视觉高度，必须作用在 td 或 th 上，而不是 tr

怎么用精确锁死单行固定高度

适用于后台列表、状态栏等纯文本、字号统一、不允许换行的场景。关键不是只设一个属性，而是四个协同生效：

• height: 32px：设定容器物理高度
• line-height: 32px：让单行文字垂直居中（值必须和 height 相等）
• box-sizing: border-box：确保 padding 和 border 不额外撑高
• padding: 0 8px：清掉上下内边距，左右留白用于呼吸感

示例 CSS：

td, th {
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  vertical-align: middle;
}

注意：vertical-align: middle 必须配合 line-height 才能真正居中；只靠 line-height 不够。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

列宽为什么经常不生效

浏览器默认用 table-layout: auto，此时列宽由整列中最宽单元格内容决定。 只是提示，不是指令。如果同一列有更长的 URL 或无空格文本，该列仍会被撑开。而且 width 是 HTML 属性，会被同名 CSS 覆盖——但即使写了 td { width: 200px }，没设 table-layout: fixed，它也只是“参考值”。

• 必须显式声明 table { table-layout: fixed; width: 100%; }，否则所有列宽控制都只是尽力而为
• 必须紧跟 开始标签后、且在 或第一行 之前
  兼容性最好； 的百分比基于表格总宽度，不是父容器
  用了 table-layout: fixed 后，
  或首行

  的 width 属性会被跳过，只读取
  /	的显式宽度 响应式或内容不确定时该怎么调 一旦单元格含图片、按钮、换行文本或多行描述，硬锁 height 和 width 就会失效。这时要放弃像素级控制，改用弹性策略： 用 min-height: 48px + padding: 12px 16px 控制最小视觉高度，允许自然撑开 需要截断多行文本：加 max-height: 64px + overflow: hidden + display: -webkit-box + -webkit-line-clamp: 2 复杂对齐需求（如图标+文字+操作按钮）：把 td 改成 display: flex，用 align-items: center 居中，但注意 IE11 不支持 移动端优先：别硬编码像素列宽；用 table-layout: auto + word-break: break-word + white-space: normal，再用 overflow-x: auto 包裹表格容器兜底 最常被忽略的一点：当表格启用了 border-collapse: collapse（绝大多数业务表格都用这个），padding 就成了影响行高的最主要因素——此时调 padding 比调 height 更直接、更可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！