统一单元格高度需设box-sizing: border-box;、统一padding与line-height、控制white-space和图片尺寸，并用table-layout: fixed;配合固定height与vertical-align: middle;实现强约束。
表格单元格高度不统一，通常是因为内容撑开、默认盒模型差异或未显式设置垂直对齐方式。解决核心是统一盒模型行为，并合理控制 padding 与 height 的关系。
统一使用 border-box 盒模型
CSS 默认的 content-box 会让 padding 和 border 额外增加元素尺寸，导致相同 height 声明下实际高度不同。表格单元格（td、th）也受此影响。
- 给表格、单元格统一设置：
box-sizing: border-box; - 推荐全局重置（尤其在表格密集场景）：
table, td, th { box-sizing: border-box; } - 这样设定后，
height: 40px就真等于「内容区 + padding + border」总高为 40px
控制 padding 与 line-height 配合
即使盒模型统一，若单元格内文字行高过大或 padding 不一致，仍会视觉上“高度不一”。关键不是删 padding，而是让 padding + line-height 组合稳定。
- 为
td和th设置统一的padding（如padding: 8px 12px;） - 搭配合适的
line-height（如line-height: 1.4;），避免单行文字贴顶贴底 - 若需固定行高，可设
height+line-height相等，并配合vertical-align: middle;
禁用内容撑高：white-space 与 overflow
长文本换行、图片未约束、空格/换行符都可能意外拉高单元格。
立即学习“前端免费学习笔记（深入）”；
- 用
white-space: nowrap;防止文本换行（适合短字段） - 或
white-space: normal; word-break: break-word;控制长内容软换行 - 图片加
max-height: 100%; height: auto; vertical-align: middle; - 必要时加
overflow: hidden;并确保height有明确值
强制统一高度：table-layout + height
当以上仍不稳定（尤其多行内容混排），可用表格布局强控：
- 给
table设table-layout: fixed;，让列宽/行高更可预测 - 为
tr或直接为td设固定height（如height: 48px;） - 配合
vertical-align: middle;居中内容，比依赖内容撑开更可靠
