vertical-align: bottom 失效是因为需满足两个条件：单元格有明确高度参考（如min-height），且内容不能是块级元素（如div）；推荐用min-height替代height，并在必要时改用flex布局实现底对齐。
vertical-align: bottom 为什么有时不生效
直接写 vertical-align: bottom 在 td 上，看起来应该管用，但实际常发现内容还是浮在中间。这不是 bug，而是它依赖两个隐含条件：单元格必须有明确高度参考，且 内容不能是块级容器（比如嵌套了 div）。
常见失效场景：
-
td高度由内容撑开，没有设height或min-height，vertical-align缺少“对齐基准” - 单元格里写了
<div>文本</div>——vertical-align对div这类块级子元素无效，只作用于行内内容或表格单元格自身 - 父
tr设了height，但子td没设line-height或padding，导致视觉上“没到底”
用 display: flex 实现真正可控的底端对齐
当你要对齐的是带结构的内容（比如图标+文字、按钮+说明），或者需要响应式高度适配，vertical-align 就力不从心了。此时把 td 变成 Flex 容器是最直接解法。
关键配置只有三行：
td.bottom {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
注意点：
-
justify-content: flex-end在column方向下 = 推内容到底部；margin-top: auto是等效替代，但更轻量 - 不要同时写
vertical-align和display: flex，后者会完全覆盖前者 - 如果该列还需保持表格语义（如屏幕阅读器识别），只给特定
td加类，别全局改td的display
兼容性与性能权衡：要不要加 height/min-height
vertical-align: bottom 要起效，不一定非得写死 height；min-height 更实用，尤其在内容长度不确定时。
推荐组合：
td { vertical-align: bottom; min-height: 40px; padding: 8px 12px; }- 避免用
height: 40px强制截断，否则长文本会被隐藏或溢出 - 若表格用了
border-collapse: collapse，边框可能侵占视觉空间，临时加outline: 1px solid red可看清真实单元格范围
别混淆：table 整体居底 ≠ td 内容居底
有人搜“表格底部对齐”，结果把 margin: auto 0 或 position: absolute; bottom: 0 加到 table 标签上——这会让整个表格贴页面底部，和单元格内部对齐无关。
确认目标再动手：
- 要让某列文字/图标贴着单元格底边？→ 改
td的样式 - 要让整张表停在页面可视区底部？→ 改
table的外容器或定位 - 要让表格最后一行固定在视口底部（类似页脚）？→ 那是布局问题，不是
vertical-align能解决的
最易被忽略的一点：flex 方案虽强，但会破坏 td 的原生 table-cell 行为——比如自动等高（同一行所有 td 高度拉齐）。如果表格行高一致性很重要，优先调 vertical-align + min-height，而不是无脑切 flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
