最常见原因是<caption>未作为<table>的第一个子元素，导致浏览器不识别其语义；其次父级text-align覆盖默认居中，需配合text-align显式设置对齐。
caption-side 为什么设了 bottom 却没反应
最常见原因是 <caption> 没放在 <table> 的第一个子元素位置——它必须紧贴 <table> 开始标签后，不能塞进 <thead> 里，也不能丢到 <table> 外面当普通文本用。DOM 结构错，浏览器就压根不把它当语义化标题处理，caption-side 自然失效。
另一个隐蔽问题：父级 <table> 上设了 text-align: left，而你只写了 caption { caption-side: bottom; }，没重置 text-align，结果标题文字缩在左下角，误以为“没动”。
- 检查渲染后的 DOM：右键 → “检查”，确认
<caption>是<table>的直接子节点 - 避免用
<h2>或<p>模拟标题——屏幕阅读器不会识别为表格标题 - 若用了 Sass/Less，确认编译后 CSS 确实包含
caption-side: bottom，不是被条件编译剔除了
caption-side: bottom 和 text-align 必须配着用
caption-side 只管标题在表格上方还是下方，不管文字怎么对齐；text-align 才控制文字在 <caption> 区域内的水平位置。两者正交，缺一不可。
比如底部居右标题，只写 caption-side: bottom 不够，还得显式加 text-align: right：
立即学习“前端免费学习笔记（深入）”；
caption {
caption-side: bottom;
text-align: right;
}
顶部居左同理：
caption {
caption-side: top;
text-align: left;
}
-
text-align: center是默认行为，但别依赖它——一旦父<table>设了text-align，它就会被继承覆盖 - 不要用
margin-left或padding“推”标题位置，语义和可访问性会受损 - Firefox 支持
caption-side: left/right，但 Chrome/Safari 不认，跨项目别用
IE8–IE7 兼容方案怎么写
caption-side 在 IE8+、Chrome 4+、Firefox 2+、Safari 3.1+ 都可用，但 IE7 及更早版本完全不支持。如果真要兼容，得降级：
- 用废弃但仍有作用的 HTML4 属性：
<caption align="bottom">（仅视觉有效，无语义） - 或用 CSS 模拟：
tfoot+display: table-caption，再配合伪元素补样式（语义弱，但视觉可达） - PDF 渲染场景更要小心：dompdf 2.x 对
bottom支持不稳定，mPDF 8+ 相对可靠，但导出后必须人工核对位置
flex 布局替代 caption 的真实代价
想实现“标题左对齐但整体居中于表格上方”这类复杂布局，有人把 <caption> 拆出来包进 <div class="caption-flex">，再用 flex 控制。这确实能绕过原生限制，但代价明显：
- 语义丢失：
<caption>移出<table>后，屏幕阅读器不再将其关联为该表格标题 - SEO 影响：搜索引擎可能忽略这个“标题”，无法建立表格内容与说明的语义链接
- 维护成本上升：后续改表格结构时，容易漏掉同步调整外部容器
除非业务强需求且已评估可访问性风险，否则优先走标准 caption-side + text-align 组合。真正容易被忽略的，是那个看似无关的父级 text-align 设置——它无声无息地覆盖掉所有努力。
