td上直接写min-height无效，因其默认display: table-cell受表格布局算法约束，css规范明确限制该属性对此类元素生效；最稳妥方案是line-height与height配合使用，或采用table-layout: fixed+tr的min-height组合。

td 上直接写 min-height 为什么没反应

因为 td 默认是 display: table-cell，而 CSS 规范明确限制 min-height 对这类元素无效——它不参与常规的块级盒模型计算，浏览器会按表格布局算法优先分配空间，直接忽略该声明。你在 DevTools 里看到样式被划掉，不是 bug，是标准行为。

用 line-height + height 实现单行最小高度最稳

适合纯文本、图标或简单内联内容的单元格，兼容 IE7+，不依赖布局模式，也不怕换行破坏：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• line-height 设为你想要的视觉最小高度（比如 line-height: 44px）
• 必须配 height: 44px，否则某些浏览器（如 Safari）下空单元格仍会塌缩
• 加 vertical-align: middle 让内容垂直居中
• 设 padding: 0，避免 padding 叠加导致实际高度超标
• 别忘了在 table 上加 border-collapse: collapse，否则默认边框间距会让高度浮动

要真正响应内容撑开，得用 table-layout: fixed + tr 的 min-height

这是唯一能让 min-height 在表格上下文中“语义生效”的组合，适用于后台列表、固定行高的数据表格：

• table 必须同时设置 table-layout: fixed 和显式宽度（如 width: 100% 或具体像素值）
• tr 上设 min-height: 48px，此时才起作用；只设 tr { min-height: 48px } 而漏掉 table 的约束，等于没写
• td 和 th 保持默认 display，靠 padding 和 vertical-align 微调内容位置
• 注意：这一行所有单元格都会被拉到至少 48px，哪怕只有一个 td 内容多，整行也会被撑高

单元格里有图片或多行文本时怎么保最小高度

这时 line-height 失效，height 会截断内容，必须转向容器级控制：

• 不要直接给 td 设 min-height，而是内部包一层 div，对这个 div 设 min-height: 60px 和 display: flex; align-items: center
• 图片务必加 max-height: 100%; height: auto;，防止突破容器
• 多行文本截断用 display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;，但要额外配 min-height 才能守住底线
• 动态渲染中字体/图片未加载完时，行高会抖动——给图片预设 width 和 height 属性，或用 aspect-ratio 预留空间

真正容易被忽略的是：表格行高从来不是单个属性能决定的事，它由整行最大内容高度、line-height、padding、border-collapse 和父级 table-layout 共同博弈。调试时永远看整行，不是只盯一个 td。

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