如何设置HTML表格的固定行高？TR样式高度限定-html教程-PHP中文网

tr 的 height 基本无效，因 tr 非可渲染盒且规范未强制支持；应通过 td/th 的 height、line-height、box-sizing、padding 和 vertical-align 组合控制行高。

如何设置html表格的固定行高？tr样式高度限定

tr 上设 height 基本无效，别白费劲——浏览器对 tr 的 height 支持极差，Chrome 直接忽略，Firefox 行为不一致，靠它做固定行高等于埋雷。

为什么 `tr` 的 `height` 不生效？

根本原因有两个：一是 tr 是表格行容器，不是“可渲染盒”，它的高度由内部 td/th 决定；二是 CSS 规范没强制要求浏览器支持 tr 的 height，实际渲染时被降级或忽略。

即使写了 <tr style="height: 32px">，只要单元格里文字换行、有 padding、font-size 变大，高度立刻突破 <li> <code>line-height 在 tr 上设置也无效，它只作用于内联内容，不控制容器高度
某些旧版 IE 或 quirks mode 下看似生效，纯属偶然，不可复现也不可依赖

真正能锁定行高的写法：只动 `td` 和 `th`

把高度控制权交给单元格，才是稳定方案。关键不是“设多高”，而是“怎么锁住不撑开”。

给 td、th 同时设 height + line-height（值相等），单行文本就能垂直居中且不溢出
必须加 box-sizing: border-box，否则默认 content-box 会让 padding 额外增加高度
显式清空上下 padding：padding: 0 8px（左右留白，上下归零）
禁用 vertical-align: baseline 默认值，改用 vertical-align: middle 配合 line-height

示例：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

td, th {
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  vertical-align: middle;
}

内容超长怎么办？不能只靠 `line-height`

line-height 只管单行间距，一旦文本换行、插入图片、嵌套 span，高度就失控。这时得组合手段：

用 max-height: 32px + overflow: hidden 强制截断（适合后台列表，不要求显示全文）
配合 text-overflow: ellipsis 和 white-space: nowrap 实现单行省略（需 display: block 或 inline-block）
多行场景放弃固定像素高度，改用 min-height: 32px + padding 控制最小视觉高度，允许弹性撑开
极端情况（如 Excel 导出 HTML 表格），加 table-layout: fixed 配合 word-break: break-all 防止宽文本撑列

表格整体高度也要固定？小心 `tbody` 暗坑

如果设了 table { height: 400px }，浏览器会自动重算所有 tr 高度来填满，你前面设的单元格高度全作废。

想让空白区域留空（比如 5 行 × 32px = 160px，但表格仍占 400px），必须把高度设在 tbody 上，并设 display: block
或者用 tbody { height: 400px; overflow-y: auto }，滚动内容区，表头固定（需额外处理 thead 定位）
绝对别给 tr 设 height 还同时给 table 设 height——这是冲突配置，结果完全不可预测