HTML表格行高不随内容撑开的主因是人为添加了height限制、table-layout:fixed未配width、line-height与height值相等、overflow:hidden未配white-space:nowrap等；解决方法是移除固定height，改用height:auto、min-height、padding和vertical-align:top等组合，并注意图片尺寸、字体加载、框架重绘及表头对齐等兼容问题。
HTML表格默认就会随内容自动撑高，不需要额外操作——问题通常出在人为加了限制，反而把它“锁死”了。
为什么你的表格行高不随内容撑开？
常见原因不是“没撑开”，而是你或框架悄悄加了以下任一限制：
- 给
<tr>或<td>写了固定height（比如height: 40px），浏览器会优先按这个值渲染，内容多就溢出或被裁剪 - 用了
table-layout: fixed却没配width，导致单元格宽度压缩、文本换行异常，进而影响高度计算逻辑 - 单元格内有
line-height+height组合，且值相等（如都设为32px），这本质是“锁单行”，内容一换行就失效 - 写了
overflow: hidden或text-overflow: ellipsis，但没配white-space: nowrap，导致换行行为不可控
让 <td> 真正自适应高度的 CSS 写法
删掉所有固定 height，改用以下组合：
-
height: auto（显式声明，避免继承父级固定值） -
min-height: 32px（保底高度，防空单元格塌陷） -
padding: 8px 12px（用 padding 控制视觉留白，比 height 更可靠） -
vertical-align: top（避免默认middle在多行时造成对齐错位） - 如果含图标或复杂 HTML，加
display: flex; align-items: flex-start;替代纯vertical-align
多行文本、图片、动态加载内容怎么稳住高度？
自适应 ≠ 放任跳变。真正要防的是“内容加载前后高度突变”：
立即学习“前端免费学习笔记（深入）”；
- 图片必须设
height或aspect-ratio，否则加载前高度为 0，加载后突然撑开整行 - 字体加载延迟会导致行高抖动，加
font-display: optional或预设 fallback 字体尺寸 - Vue/React 渲染后高度跳变，是因为框架重绘触发 layout shift，可在父容器加
contain: layout paint——但必须配合min-height和max-height才生效（<table>自身不支持contain） - 长文本换行不可控？用
word-break: break-word+white-space: normal，别依赖nowrap
最容易被忽略的兼容点
表格行高自适应不是“设完就完事”。<tbody> 里某一行撑高了，<thead> 的 <th> 如果还维持旧高度，视觉上就会错位——哪怕只调数据行，也得同步检查表头单元格的 vertical-align 和 padding 是否一致。另外，border-collapse: collapse 下边框会叠加，可能让实际高度比预期多 1px，调试时用开发者工具的盒模型查看器确认真实尺寸。
