的height基本无效，因其非标准渲染盒，高度由/决定；应通过td, th { height: 32px; line-height: 32px; box-sizing: border-box; padding: 0 8px; vertical-align: middle; }组合控制行高。

为什么上设height基本没用

浏览器根本不把 tr 当作标准渲染盒，它的高度完全由子元素（td/th）撑开。你写 ，只要单元格里加了 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 就能把整列拉宽，间接推高行高、破坏对齐。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

启用 table-layout: fixed 后：

• 列宽按第一行或 定义分配，不随内容重排
• 必须配合显式列宽控制：用 ，别依赖 td 上的 width
• 长文本需手动加 word-break: break-word 或 overflow-wrap: break-word，否则仍会撑破单元格
• 注意 Safari 对 的宽度支持更严格，百分比比 fr 更可靠

最麻烦的从来不是怎么写 height，而是当多语言混排、图片尺寸不一、字体加载延迟同时发生时，padding 和 line-height 的微小差异会被放大成明显跳变 —— 这时候宁可用 min-height + overflow-y: auto 放弃“绝对一致”，也别强求锁死高度。

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