tr的height属性基本无效，因tr非标准盒模型容器，高度由td/th内容决定；须在td/th上组合设置height、line-height、box-sizing和padding才能精确锁死行高。
为什么的height属性基本没用
Chrome 完全忽略 tr 上的 height，Firefox 表现不稳定，Safari 仅部分响应。根本原因是 tr 不是标准渲染盒，它的高度由子元素（td/th）决定，不是靠自身样式控制。你写 <tr style="height: 40px">，只要单元格里加了 <code>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：
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
td, th {
height: 32px;
line-height: 32px;
box-sizing: border-box;
padding: 0 8px;
vertical-align: middle;
}
注意：vertical-align: middle 必须配合 line-height 才能真正居中；只靠 line-height 不够。
立即学习“前端免费学习笔记（深入）”；
列宽为什么经常不生效
浏览器默认用 table-layout: auto，此时列宽由整列中最宽单元格内容决定。<td width="200"> 只是提示，不是指令。如果同一列有更长的 URL 或无空格文本，该列仍会被撑开。而且 <code>width 是 HTML 属性，会被同名 CSS 覆盖——但即使写了 td { width: 200px }，没设 table-layout: fixed，它也只是“参考值”。
- 必须显式声明
table { table-layout: fixed; width: 100%; }，否则所有列宽控制都只是尽力而为
-
<colgroup></colgroup> 必须紧跟 <table> 开始标签后、且在 <code><thead> 或第一行 <code><tr> 之前
<li>
<code><col width="120"> 兼容性最好；<col style="width: 25%"> 的百分比基于表格总宽度，不是父容器
- 用了
table-layout: fixed 后，<td> 的 <code>width 属性会被跳过，只读取 <col> 或首行 <th>/</th>
<td> 的显式宽度
<h3>响应式或内容不确定时该怎么调</h3>
<p>一旦单元格含图片、按钮、换行文本或多行描述，硬锁 <code>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 更直接、更可控。
Chrome 完全忽略 tr 上的 height，Firefox 表现不稳定，Safari 仅部分响应。根本原因是 tr 不是标准渲染盒，它的高度由子元素（td/th）决定，不是靠自身样式控制。你写 <tr style="height: 40px">，只要单元格里加了 <code>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：
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
td, th {
height: 32px;
line-height: 32px;
box-sizing: border-box;
padding: 0 8px;
vertical-align: middle;
}
注意：vertical-align: middle 必须配合 line-height 才能真正居中；只靠 line-height 不够。
立即学习“前端免费学习笔记（深入）”；
列宽为什么经常不生效
浏览器默认用 table-layout: auto，此时列宽由整列中最宽单元格内容决定。<td width="200"> 只是提示，不是指令。如果同一列有更长的 URL 或无空格文本，该列仍会被撑开。而且 <code>width 是 HTML 属性，会被同名 CSS 覆盖——但即使写了 td { width: 200px }，没设 table-layout: fixed，它也只是“参考值”。
- 必须显式声明
table { table-layout: fixed; width: 100%; }，否则所有列宽控制都只是尽力而为
-
<colgroup></colgroup> 必须紧跟 <table> 开始标签后、且在 <code><thead> 或第一行 <code><tr> 之前
<li>
<code><col width="120"> 兼容性最好；<col style="width: 25%"> 的百分比基于表格总宽度，不是父容器
- 用了
table-layout: fixed 后，<td> 的 <code>width 属性会被跳过，只读取 <col> 或首行 <th>/</th>
<td> 的显式宽度
<h3>响应式或内容不确定时该怎么调</h3>
<p>一旦单元格含图片、按钮、换行文本或多行描述，硬锁 <code>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 更直接、更可控。
适用于后台列表、状态栏等纯文本、字号统一、不允许换行的场景。关键不是只设一个属性，而是四个协同生效：
-
height: 32px：设定容器物理高度 -
line-height: 32px：让单行文字垂直居中（值必须和height相等） -
box-sizing: border-box：确保padding和border不额外撑高 -
padding: 0 8px：清掉上下内边距，左右留白用于呼吸感
示例 CSS：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
td, th {
height: 32px;
line-height: 32px;
box-sizing: border-box;
padding: 0 8px;
vertical-align: middle;
}
注意：vertical-align: middle 必须配合 line-height 才能真正居中；只靠 line-height 不够。
立即学习“前端免费学习笔记（深入）”；
列宽为什么经常不生效
浏览器默认用 table-layout: auto，此时列宽由整列中最宽单元格内容决定。<td width="200"> 只是提示，不是指令。如果同一列有更长的 URL 或无空格文本，该列仍会被撑开。而且 <code>width 是 HTML 属性，会被同名 CSS 覆盖——但即使写了 td { width: 200px }，没设 table-layout: fixed，它也只是“参考值”。
- 必须显式声明
table { table-layout: fixed; width: 100%; }，否则所有列宽控制都只是尽力而为
-
<colgroup></colgroup> 必须紧跟 <table> 开始标签后、且在 <code><thead> 或第一行 <code><tr> 之前
<li>
<code><col width="120"> 兼容性最好；<col style="width: 25%"> 的百分比基于表格总宽度，不是父容器
- 用了
table-layout: fixed 后，<td> 的 <code>width 属性会被跳过，只读取 <col> 或首行 <th>/</th>
<td> 的显式宽度
<h3>响应式或内容不确定时该怎么调</h3>
<p>一旦单元格含图片、按钮、换行文本或多行描述，硬锁 <code>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 更直接、更可控。
浏览器默认用 table-layout: auto，此时列宽由整列中最宽单元格内容决定。<td width="200"> 只是提示，不是指令。如果同一列有更长的 URL 或无空格文本，该列仍会被撑开。而且 <code>width 是 HTML 属性，会被同名 CSS 覆盖——但即使写了 td { width: 200px }，没设 table-layout: fixed，它也只是“参考值”。
- 必须显式声明
table { table-layout: fixed; width: 100%; }，否则所有列宽控制都只是尽力而为 -
<colgroup></colgroup>必须紧跟<table> 开始标签后、且在 <code><thead> 或第一行 <code><tr> 之前 <li> <code><col width="120">兼容性最好；<col style="width: 25%">的百分比基于表格总宽度，不是父容器 - 用了
table-layout: fixed后，<td> 的 <code>width属性会被跳过，只读取<col>或首行<th>/</th> <td> 的显式宽度 <h3>响应式或内容不确定时该怎么调</h3> <p>一旦单元格含图片、按钮、换行文本或多行描述，硬锁 <code>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更直接、更可控。 - 用
