的height基本无效，因其非标准渲染盒，高度由/决定；应通过td, th { height: 32px; line-height: 32px; box-sizing: border-box; padding: 0 8px; vertical-align: middle; }组合控制行高。
为什么上设height基本没用
浏览器根本不把 tr 当作标准渲染盒，它的高度完全由子元素（td/th）撑开。你写 <tr style="height: 40px">，只要单元格里加了 <code>padding、字体变大、或内容换行，实际高度立刻突破。DevTools 里看到 “Computed height” 没变，不是生效了，而是浏览器压根没处理这个声明。
真正可控的入口只有 td 和 th，且必须组合使用：
-
height 和 line-height 设为相等值（如都为 32px），才能锁死单行文本的视觉高度
- 必须加
box-sizing: border-box，否则 padding 会额外撑高
-
padding 要清掉上下值（如 padding: 0 8px），只留左右呼吸感
- 避免用无单位
line-height（如 1.5），不同字号下会失准；固定像素更稳
多行内容或动态数据时怎么防撑破
一旦单元格里有换行文本、图片或异步加载内容，height+line-height 就彻底失效。这时候不能硬锁，得换策略：
- 用
min-height: 32px + padding: 10px 8px 控制最小视觉高度，允许弹性撑开
- 需要截断显示两行：加
max-height: 64px + overflow: hidden + display: -webkit-box + -webkit-line-clamp: 2
- 要精确垂直居中且兼容性要求不高：把
td 改成 display: flex + align-items: center，但 IE11 不支持
- React/Vue 动态渲染时高度跳变？给图片加
width/height 属性，或用 min-height 占位防 layout shift
表格整体高度失控的常见链式原因
表格“看起来太高”或“被压扁”，往往不是某一行的问题，而是高度继承链断了：
立即学习“前端免费学习笔记（深入）”；
-
table { height: 100% } 无效，因为 table 默认不继承父高 —— 必须从 html、body 开始，每一层父容器（包括直接包裹 table 的 div）都显式设 height 或 min-height
- 想让表格区域固定高并可滚动？
max-height 和 overflow-y: auto 必须加在 table 的**直接父容器**上，而不是 table 自身（table 不支持 max-height 剪裁）
- 嵌套表格中内层
table 设 height: 80% 失效？外层 td 高度由内容决定，没有百分比基准 —— 改用 flex 布局并列放表，或 JS 动态读取 clientHeight 赋值
-
border-collapse: collapse 开启后，cellspacing/cellpadding 完全失效，所有间距必须用 padding 控制
table-layout: fixed 是高度稳定的隐性前提
很多人调了半天高度，最后发现是列宽浮动导致的连锁反应。默认 table-layout: auto 下，浏览器等所有内容渲染完才算列宽，一条长 URL 就能把整列拉宽，间接推高行高、破坏对齐。
启用 table-layout: fixed 后：
- 列宽按第一行或
<col> 定义分配，不随内容重排
- 必须配合显式列宽控制：用
<colgroup><col style="width: 20%"></colgroup>，别依赖 td 上的 width
- 长文本需手动加
word-break: break-word 或 overflow-wrap: break-word，否则仍会撑破单元格
- 注意 Safari 对
<col> 的宽度支持更严格，百分比比 fr 更可靠
最麻烦的从来不是怎么写 height，而是当多语言混排、图片尺寸不一、字体加载延迟同时发生时，padding 和 line-height 的微小差异会被放大成明显跳变 —— 这时候宁可用 min-height + overflow-y: auto 放弃“绝对一致”，也别强求锁死高度。
浏览器根本不把 tr 当作标准渲染盒，它的高度完全由子元素（td/th）撑开。你写 <tr style="height: 40px">，只要单元格里加了 <code>padding、字体变大、或内容换行，实际高度立刻突破。DevTools 里看到 “Computed height” 没变，不是生效了，而是浏览器压根没处理这个声明。
真正可控的入口只有 td 和 th，且必须组合使用：
-
height和line-height设为相等值（如都为32px），才能锁死单行文本的视觉高度 - 必须加
box-sizing: border-box，否则padding会额外撑高 -
padding要清掉上下值（如padding: 0 8px），只留左右呼吸感 - 避免用无单位
line-height（如1.5），不同字号下会失准；固定像素更稳
多行内容或动态数据时怎么防撑破
一旦单元格里有换行文本、图片或异步加载内容，height+line-height 就彻底失效。这时候不能硬锁，得换策略：
- 用
min-height: 32px+padding: 10px 8px控制最小视觉高度，允许弹性撑开 - 需要截断显示两行：加
max-height: 64px+overflow: hidden+display: -webkit-box+-webkit-line-clamp: 2 - 要精确垂直居中且兼容性要求不高：把
td改成display: flex+align-items: center，但 IE11 不支持 - React/Vue 动态渲染时高度跳变？给图片加
width/height属性，或用min-height占位防 layout shift
表格整体高度失控的常见链式原因
表格“看起来太高”或“被压扁”，往往不是某一行的问题，而是高度继承链断了：
立即学习“前端免费学习笔记（深入）”；
-
table { height: 100% }无效，因为table默认不继承父高 —— 必须从html、body开始，每一层父容器（包括直接包裹table的div）都显式设height或min-height - 想让表格区域固定高并可滚动？
max-height和overflow-y: auto必须加在table的**直接父容器**上，而不是table自身（table不支持max-height剪裁） - 嵌套表格中内层
table设height: 80%失效？外层td高度由内容决定，没有百分比基准 —— 改用flex布局并列放表，或 JS 动态读取clientHeight赋值 -
border-collapse: collapse开启后，cellspacing/cellpadding完全失效，所有间距必须用padding控制
table-layout: fixed 是高度稳定的隐性前提
很多人调了半天高度，最后发现是列宽浮动导致的连锁反应。默认 table-layout: auto 下，浏览器等所有内容渲染完才算列宽，一条长 URL 就能把整列拉宽，间接推高行高、破坏对齐。
启用 table-layout: fixed 后：
- 列宽按第一行或
<col>定义分配，不随内容重排 - 必须配合显式列宽控制：用
<colgroup><col style="width: 20%"></colgroup>，别依赖td上的width - 长文本需手动加
word-break: break-word或overflow-wrap: break-word，否则仍会撑破单元格 - 注意 Safari 对
<col>的宽度支持更严格，百分比比fr更可靠
最麻烦的从来不是怎么写 height，而是当多语言混排、图片尺寸不一、字体加载延迟同时发生时，padding 和 line-height 的微小差异会被放大成明显跳变 —— 这时候宁可用 min-height + overflow-y: auto 放弃“绝对一致”，也别强求锁死高度。
