vertical-align: bottom 仅作用于 td/th 内容在单元格内的垂直定位，非整行对齐；需配合显式 height 或 padding 才可见效，对 table/tr 无效，复杂场景推荐 flex 替代。
vertical-align: bottom 只对单元格内容生效，不是让整行靠下
很多人写 vertical-align: bottom 后发现没效果，其实是误解了它的作用对象：它控制的是 td 或 th 内部内容在该单元格高度范围内的垂直位置，而不是把整行“推到表格底部”。如果单元格本身没撑开高度（比如只有一行文本、没设 height 或 padding），bottom 就看不出区别。
实操建议：
- 必须配合显式高度或足够
padding才能观察到底部对齐效果，例如：td { height: 60px; vertical-align: bottom; } - 避免在
table或tr上写vertical-align—— 它对这两个元素无效 - 若单元格内含多行文本或图片，
vertical-align: bottom会让第一行基线贴底，不是文字整体下沉；此时更稳妥的做法是用display: flex+align-items: flex-end
table 布局下 bottom 对齐的常见失效场景
以下情况会导致 vertical-align: bottom 表面“不工作”：
-
td没设置固定高度，且父tr高度由内容自适应 → 单元格实际高度≈文字行高，bottom和middle看起来一样 - 单元格里套了
div且该div是块级元素，默认占满宽度但不继承vertical-align→ 此时需给内部div设display: inline-block或改用 Flex - 用了
border-collapse: collapse但忘了重置padding，导致视觉上文字仍“浮”在中间
一个可靠写法示例：
立即学习“前端免费学习笔记（深入）”；
td.bottom-aligned {
height: 80px;
padding: 0;
vertical-align: bottom;
}
td.bottom-aligned > * {
margin-top: auto;
margin-bottom: 0;
}替代方案：用 display: flex 实现更可控的底部对齐
当 vertical-align 不够用（比如要对齐复杂子结构、响应式高度变化），直接把 td 变成 Flex 容器更直观：
- 给
td加display: flex和flex-direction: column - 用
margin-top: auto推内容到底部（比align-items: flex-end更适合单子元素） - 注意：这会覆盖默认表格盒模型行为，若需保持表格语义结构，仅在特定列使用
简短示例：
<td style="display: flex; flex-direction: column; height: 100px;"> <span>顶部信息</span> <span style="margin-top: auto;">底部标签</span> </td>
别混淆：table 整体居底 ≠ 单元格内容居底
如果目标是让整个 table 在页面中底部对齐（比如页脚固定表），那是布局问题，和 vertical-align 无关：
- 用
position: absolute; bottom: 0;配合父容器position: relative - 或用 Flex 布局：父容器设
display: flex; flex-direction: column;，table加margin-top: auto -
vertical-align对table元素本身完全无效，写上去不会起作用
真正容易被忽略的点是：同一份 HTML，vertical-align: bottom 在 Chrome 和 Firefox 中渲染一致，但在旧版 Safari（inline-block 子元素的单元格支持不稳定 —— 如果要兼容 iOS 14 及更早系统，优先选 Flex 方案。
