的 height 属性基本无效，因其非标准可布局元素，高度由子单元格决定；应通过 设置 height、line-height、box-sizing: border-box 等样式控制行高。
height 属性在 <td> 或 <code><th> 上能起作用，但在 <code><tr> 上基本靠不住——Chrome 直接忽略，Firefox 表现也不一致。真正可控的方式是直接操作单元格样式。
<h3>为什么 <code><tr> 的 <code>height 属性经常失效
浏览器对 <tr> 元素的 <code>height 支持极弱，它不是 CSS 标准中定义的可布局元素，渲染时高度由其子单元格内容和样式共同决定。即使你写了 <tr height="60">，也大概率被忽略或仅在旧版 IE 中生效。
<ul><li><code><tr> 本身没有盒模型高度概念，它的“高”只是视觉叠加结果
<li>多个 <code><td> 高度不一致时，<code><tr> 会取最大值，而不是按你写的 <code>height 拉伸或压缩
height 属性（如 <td height="40">）已被 W3C 弃用，现代项目应避免使用
<h3><code><td> 上设 <code>height + line-height 锁定单行高度
这是后台列表、数据表格等固定行高的最常用方案，关键在于让容器高度和文本行高严格对齐。
- 给
<td> 同时设置 <code>height: 40px和line-height: 40px，文本自然垂直居中 - 必须加
box-sizing: border-box，否则默认content-box下 padding 会让实际高度突破 40px - 显式写
padding: 0，避免浏览器默认或重置样式干扰 - 加上
vertical-align: middle防止某些字体 baseline 偏移导致视觉错位
示例：
td { height: 40px; line-height: 40px; box-sizing: border-box; padding: 0; vertical-align: middle; }
多行内容或含图片时，height 不再适用
一旦单元格里有换行文本、<img> 或其他块级元素，height 就会失效——内容撑开容器是浏览器默认行为，且无法被简单压制。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 改用
max-height+overflow: hidden截断溢出（适合摘要类场景） - 需要省略号效果？得配合
display: -webkit-box和-webkit-line-clamp - 若需完整保留内容又控制高度，建议放弃表格布局，用
display: flex重写单元格结构 - 记得加
border-collapse: collapse到<table>，否则默认分离模式下边框+间距会让高度计算更混乱 <h3>动态渲染时高度跳变，常被忽略的三个点</h3> <p>React/Vue/Angular 渲染表格后，高度突然变化，往往不是样式写错了，而是底层渲染节奏问题。</p> <ul> <li>图片没设宽高属性，加载完成前占位为 0，导致行高塌陷；加 <code>width/height或min-height预留空间 - 字体未加载完（尤其自定义字体），
font-display: swap能缓解但不能根治，必要时用min-height替代height - 服务端渲染（SSR）与客户端样式注入顺序不一致，导致初始渲染无样式，后续重绘跳变；检查 CSS 是否内联或提前加载
真正麻烦的从来不是怎么设高度，而是怎么让它不意外变高——内容驱动的表格，min-height 比 height 更接近真实需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
