直接给 或 加 height 属性基本失效，因 html5 已弃用且浏览器行为不一致；稳定控制高度必须用 css，配合 height、line-height、box-sizing: border-box 等协同声明。

直接给 <td> 或 <code><th> 加 <code>height 属性最简单，但现代项目里它基本失效——浏览器不保证渲染，且 HTML5 已弃用。真要稳定控制高度，必须用 CSS。

为什么 height 属性在 <td> 上经常不生效 <p>不是你写错了，是浏览器行为不一致：Chrome 会忽略 <code><td height="40">，Firefox 可能部分响应，Safari 更倾向按内容撑开。根本原因是表格单元格的盒模型默认为 <code>box-sizing: content-box，而 padding、border、line-height 都会叠加到你设的 height 上，实际高度远超预期。

• 即使写了 height="40"，只要单元格里有两行文字或一张图片，高度就自动突破
• <tr height="40"> 更不可靠——W3C 明确不推荐，多数现代引擎根本不解析该属性 <li>父级 <code><table> 设了 <code>height，也不等于子单元格会被压缩；它只作为“最小高度”参考，内容优先

  CSS 控制单元格高度的实操组合

  真正能锁死视觉高度的，是一组协同生效的 CSS 声明。单靠 height 不够，必须搭配 line-height 和 box-sizing：

  • 对单行文本：height: 40px; line-height: 40px; box-sizing: border-box; padding: 0;
  • 避免用百分比值（如 height: 20%），表格容器高度未定义时它会计算为 0
  • 若需兼容旧 IE，加 vertical-align: middle; 确保文字居中，否则 line-height 可能偏上或偏下
  • 遇到合并单元格（rowspan），高度由首个单元格决定，后续跨行单元格的 height 声明会被忽略

  内容溢出时怎么稳住高度

  固定高度遇上长文本或动态数据，容易撑破布局。这时候 height 反而是陷阱，应改用防御性声明：

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 优先用 min-height: 40px; 替代 height: 40px;，让内容多时自然扩展，少时保持基础高度
  • 截断多行文本：用 display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;（注意 Safari 和 Chrome 支持，Firefox 需额外处理）
  • 图片导致高度失控？给 img 加 max-height: 100%; object-fit: contain;，并确保父 <td> 有明确 <code>height 或 min-height
  • 空单元格塌陷？加 line-height: 1; font-size: 0; 或插入零宽空格 ​ 防止高度归零

  真正难的不是写哪一行代码，而是判断当前场景到底要不要固定高度——后台数据列表常需严格对齐，用户生成内容则大概率得放行溢出。别为了“看起来整齐”硬塞 height，最后花三倍时间调 overflow 和 vertical-align。

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