caption-side: bottom 必须作用于table元素而非caption，且caption必须是table的直接子元素（首或尾），同时需配合text-align控制水平对齐；ie8需标准doctype，pdf导出可能不识别该属性。
caption-side: bottom 必须写在 table 上，不是 caption 上
直接写 caption { caption-side: bottom; } 是无效的。这个属性控制的是“表格容器如何安放它的标题”，所以它只对 table 元素生效，浏览器会完全忽略作用在 caption 上的该声明。
正确写法是：
table {
caption-side: bottom;
}
或者更稳妥地限定范围：
.data-table {
caption-side: bottom;
}
注意：caption-side 不继承，也不作用于伪元素或包裹容器——它只认 table 元素本身。
caption 必须是 table 的第一个或最后一个直接子节点
如果 <caption></caption> 被包在 <thead>、<code><div> 里，或者出现在 <code><tr> 后面，浏览器就不再把它识别为语义化标题，<code>caption-side 也就静默失效。
- ✅ 正确结构：
<table> <caption>标题</caption> <tr><td>...</td></tr> </table> - ✅ 也可放末尾：
<table> <tr><td>...</td></tr> <caption>标题</caption> </table> - ❌ 错误结构：
<table><thead><caption>标题</caption></thead></table> - ❌ 错误结构：
<table><div><caption>标题</caption></div></table>
caption-side 和 text-align 是两回事，得一起配
caption-side: bottom 只决定标题在表格上方还是下方，不控制文字左右位置。如果你发现标题“掉到底部但缩在左边”，大概率是父级 table 或全局样式设置了 text-align: left，而你没显式重置 caption 的对齐方式。
常见组合写法：
table {
caption-side: bottom;
}
<p>caption {
text-align: right; /<em> 或 center / left </em>/
}</p>
别依赖默认居中——一旦有继承来的 text-align，它就会覆盖。
IE8 需要标准 DOCTYPE，PDF 导出可能不认 caption
IE8 支持 caption-side: bottom，但前提是文档开头有 。没有它，IE8 会退回到怪异模式，属性失效。
更现实的问题是：导出 PDF（比如用 dompdf 或浏览器打印）时，caption 很可能被跳过。SheetJS、Excel 导出库也基本不读取它。如果导出后必须带标题，得在 JS 层手动插入一行，或用 data-caption 属性冗余存储并二次注入。
真正容易被忽略的点是：你调好了视觉效果，却忘了检查屏幕阅读器是否能读出来、导出结果是否包含标题、打印预览是否正常——这些环节都不靠 CSS 渲染，而是靠 DOM 结构和语义完整性。
