最稳方案是同时设置 height 和 line-height 于 td/th，配合 table-layout: fixed；禁用旧属性，用 min-height 防跳变，现代 CSS 优先。

直接给 <td> 设 <code>height + line-height 最稳

Chrome 里对 <tr> 的 <code>height 属性基本忽略，Firefox 表现也不一致，靠不住。真正能锁死像素高度的，是作用在 <td> 或 <code><th> 上。 <p>实操建议：</p> <ul> <li>同时设 <code>height: 40px 和 line-height: 40px，单行文本就能垂直居中且不撑高

加 box-sizing: border-box，避免 padding 溢出高度

显式清空上下 padding：padding: 0 8px（左右留白，上下归零）

禁用 vertical-align: baseline 默认值，改用 vertical-align: middle 防文字偏下

table-layout: fixed 能让多行内容也守规矩

默认表格布局会随内容伸缩，哪怕你设了 height，换行或长文本照样撑开。这时候必须开启固定布局。

关键配置：

• 给 <table> 加 <code>table-layout: fixed
• 配合 width（比如 width: 100% 或具体像素），否则 fixed 模式可能失效
• 单元格内用 word-break: break-word 或 overflow: hidden 控制溢出
• 若需截断多行文本，line-height 就不管用了，得上 display: -webkit-box + line-clamp

别碰 cellpadding、cellspacing 和内联 height 属性

这些是 HTML4 旧属性，HTML5 已弃用，语义混乱、兼容性差、无法响应式，现代项目里混用只会增加调试成本。


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载

典型问题现象：

• 写 <tr height="32">，在 Safari 或新 Edge 里完全没反应 <li>设了 <code>cellpadding="5"，再写 CSS padding 会叠加，高度失控
• 用 border-collapse: collapse 后，cellspacing 归零，但旧属性残留仍干扰计算

动态渲染时高度跳变？加 min-height 和图片占位

AJAX 或 React/Vue 渲染表格时，字体加载延迟、图片未载入都会导致行高瞬间收缩再撑开，用户体验极差。

防抖方案：

• 给 <td> 设 <code>min-height: 40px，兜底最小空间
• 图片用 aspect-ratio 或提前声明 width/height 属性
• 搭配 font-display: swap 避免字体加载导致行高重排
• 慎用 max-height —— 它只限制上限，不防初始塌陷
实际像素高度控制，核心就两条：一是把 height 和 line-height 扎根到 <td>，二是用 <code>table-layout: fixed 切断内容对高度的支配权。其他所有技巧，都是在这两条基础上打补丁。

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