HTML表格怎么设置最小高度？MIN-HEIGHT属性防止内容塌陷-html教程-PHP中文网

td/th直接写min-height无效，因二者属表格内联级元素，css规范明确限制该属性对其不生效；有效方案是启用table-layout:fixed后在tr上设min-height，或用line-height+padding组合模拟视觉高度。

html表格怎么设置最小高度？min-height属性防止内容塌陷

td/th 直接写 min-height 为什么没用？

因为 td 和 th 是表格内联级元素（replaced inline-level），CSS 规范明确限制 min-height 对它们无效。你在 Chrome 或 Firefox 里写了 td { min-height: 60px; }，但单元格依然塌成一行——这不是浏览器 bug，是标准行为。

真正能起效的路径只有两条：改父级布局模式，或改元素自身 display 类型。前者更语义化、兼容性更好；后者容易破坏表格结构，慎用。

table-layout: fixed + tr.min-height 是最稳方案

给 table 设 table-layout: fixed，再在 tr 上设 min-height，所有现代浏览器（Chrome/Firefox/Safari/Edge）和 IE8+ 都支持。

关键前提有三个：

table 必须有明确宽度（如 width: 100% 或具体像素值），否则固定布局无法计算列宽，tr 的 min-height 会被忽略
不要同时给 tr 写 height 和 min-height，height 会覆盖后者
min-height 在 tr 上只设下限，内容多时行高仍会自动撑开

示例代码：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

table {
  table-layout: fixed;
  width: 100%;
}
tr {
  min-height: 48px;
}
td, th {
  padding: 8px 12px;
  vertical-align: middle;
}

不想改 table-layout？用 line-height + padding 更省心

如果表格结构复杂、不能轻易加 table-layout: fixed，纯靠视觉高度控制更稳妥：用 line-height 搭配上下 padding 来“撑开”单元格。

这不是语义上的最小高度，但兼容性极好（IE6+ 都行），且不会影响列宽计算或响应式表现：

td, th { line-height: 1.5; padding-top: 12px; padding-bottom: 12px; }
避免只设 padding 不调 line-height，否则多行文本可能挤在一起
若内容含图片或 inline-block 元素，需额外加 vertical-align: middle 对齐

嵌套在 flex 容器里要注意什么？

即使 table 外层是 display: flex，只要它自身满足 table-layout: fixed + width，tr.min-height 依然有效。但容易被忽略的是：

父 flex 容器若设了 align-items: center 或 flex-start，可能让整个表格垂直偏移，看起来像“没撑高”
检查 table 的 computed height 是否为 0 —— 如果是，说明它没继承到父容器高度，得给父容器加 min-height 或 height
滚动区域里套表格时，别只设 min-height，还得配 height 和 overflow-y: auto，否则滚动条不出现