应直接给 td 或 th 设置 vertical-align: top，因该属性仅对 display: table-cell 元素生效；tr、table 上设置无效；需配合 padding-top: 0、height 等确保视觉效果，禁用已废弃的 valign 属性。
直接给 td 或 th 加 vertical-align: top，别碰 valign 属性，也别往 tr 或 table 上写 —— 那些都不起作用。
为什么 vertical-align: top 写在 tr 上没用
因为 vertical-align 只对 display: table-cell 元素生效，也就是 td 和 th。浏览器把 tr 当作 display: table-row，它根本不吃这个属性。写了等于白写，还容易误导自己以为“样式没加载”。
-
tr { vertical-align: top }→ 完全无效 -
table { vertical-align: top }→ 无效，且语义错误 - 正确写法只有：
td { vertical-align: top; }或td, th { vertical-align: top; }
为什么写了 vertical-align: top 还是看起来“没顶到边”
不是对齐失败，而是视觉干扰项太多：浏览器默认给 td 设了 padding: 2px，文字离上边的实际距离主要来自这个内边距，不是对齐问题。
- 加
padding-top: 0才能让文字真正贴顶（但注意会去掉所有上内边距，需同步检查是否影响其他样式） - 单元格没设
height或min-height，高度由内容撑开，vertical-align就失去参照基准 - 中英文混排时，字体 ascender 高度会让第一行文字“视觉上浮”，这是字体度量本身决定的，不是 bug
怎么让整列或某几列顶部对齐
用 CSS 选择器精准控制，避免全局污染：
- 整表统一：
td, th { vertical-align: top; } - 只对第二列：
td:nth-child(2), th:nth-child(2) { vertical-align: top; } - 某类数据列（如备注列）：
td.notes, th.notes { vertical-align: top; } - 配合
height确保效果明显：td { vertical-align: top; height: 48px; }
千万别再用 valign="top" 或 align 属性
这些是 HTML4 遗留语法，HTML5 已明确废弃。W3C 验证器报错，React/Vue 模板里不解析，iOS Safari 某些版本直接忽略，无障碍工具跳过识别 —— 表面“还能用”，实际是浏览器在做向后兼容兜底。
<td valign="top"> → 废弃，不可靠，禁用 <li><code><td align="right"> → 废弃，水平对齐请用 <code>text-align-
<caption align="right"></caption>→ 同样废弃，改用caption { text-align: right; }
最常被忽略的一点：对齐效果是否明显，取决于单元格有没有“可参照的高度”。如果内容就一行、又没设 height 或 padding，vertical-align: top 在视觉上几乎看不出差别 —— 不是它没生效，是你没给它表现的机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
