vertical-align: top 是唯一标准且有效的实现方式，valign="top" 已被 HTML5 彻底移除；其看似失效主因是单元格无显式高度、内部块级元素自带偏移、CSS 框架覆盖或作用目标错误，需直接设于 td/th 并配合 min-height 和子元素重置才能可靠生效。
vertical-align: top 是唯一有效且标准的实现方式，valign="top" 已被 HTML5 彻底移除，现代浏览器（Chrome/Firefox/Edge 90+）直接忽略它，写了等于白写。
为什么 vertical-align: top 看起来没生效？
这不是属性失效，而是布局上下文干扰导致的视觉错觉：
- 单元格本身无显式高度，
top对齐的是“内容撑开后的顶部”，而非整行视觉顶部——加min-height或padding才能看清效果 -
td内嵌套了div、input等块级元素，它们自带margin或默认line-height，把内容实际推离了顶部 - CSS 框架（如 Bootstrap）可能全局设置了
td { vertical-align: middle; }，覆盖了你的局部设置 - 误对齐目标：给
td子元素（比如<p>）设vertical-align无效，该属性不作用于普通块级子元素
怎么确保 vertical-align: top 可靠起作用？
关键不是“加不加”，而是“加在哪”和“配什么”：
- 必须直接作用于
td或th元素本身，例如：<td style="vertical-align: top;">文本</td> - 配合
min-height（推荐）或height，避免高度塌陷导致对齐不可见；min-height: 32px是常用安全值 - 若内部有
input、button等表单控件，检查它们是否带默认margin或vertical-align，可统一重置：input, button { margin: 0; vertical-align: top; } - 遇到样式被覆盖时，优先提高选择器特异性（如用
table.my-table td.top-align），而非滥用!important
复杂场景下要不要换 Flex？
没必要。只要单元格结构简单（纯文本、单个图标、单个输入框），vertical-align: top 就足够精准、轻量、兼容性好（IE8+ 支持）。Flex 是为多子元素、换行文本、图标+文字混合等场景准备的——如果你只是让一段短文本靠上，Flex 反而引入额外高度控制负担和 IE11 兼容成本。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：同一行中不同 td 的高度由最高者决定；哪怕你所有单元格都设了 top，只要某一列内容撑高了整行，其他列的“顶部”也会跟着上移——这不是 bug，是表格渲染逻辑本身。
