caption必须是table的第一个子元素，否则语义绑定失效；中间不能有换行、注释、空格或不可见字符，否则document.querySelector('table').caption返回null且caption-side无效。
caption 标签必须是 table 的第一个子元素，否则位置控制失效——这不是样式问题，而是语义绑定失败。
caption 必须紧贴 table 开始标签后，中间不能有空格或注释
浏览器和辅助技术（如屏幕阅读器）只认 DOM 中「紧挨着 <table> 之后」的 caption。哪怕中间多一个换行、一个 HTML 注释、甚至一个空格，document.querySelector('table').caption 就返回 null，caption-side 也失去作用对象。
- ✅ 正确：
<table><caption>销售汇总</caption><thead>... - ❌ 错误：
<table>\n<!-- 备注 -->\n<caption>销售汇总</caption>（换行+注释 → 语义断裂） - ❌ 更隐蔽错误：
<table><caption>销售汇总</caption><tbody><tr><td>...中间没其他标签，但开头有不可见 Unicode 空格（比如 U+200B）→ 同样被忽略
caption-side: bottom 渲染无效的常见原因
写上 caption-side: bottom 却没反应？大概率不是 CSS 写错了，而是底层语义没建立起来。PDF 生成器（如 dompdf 2.x）尤其敏感，常直接跳过非首子元素的 caption。
- 检查 DOM 结构是否满足「
table→caption→thead/tbody」的严格顺序 - 旧版 IE（≤IE7）完全不支持
caption-side，若需兼容，只能用废弃的align="bottom"（HTML4 属性，仅作兜底） - dompdf 对
bottom渲染不稳定：标题可能出现在表格下方数厘米处，建议导出后人工核对；mPDF 8+ 更可靠，但仍非 100% - CSS 权重干扰：父级设了
text-align: left，而你只写了caption { caption-side: bottom; }，结果文字左对齐挤在左下角，误以为“没动”
text-align 和 caption-side 必须配合使用
caption 默认居中，且这个行为**不继承**父元素的 text-align。想让它左对齐或右对齐，必须显式声明 text-align，同时确保 caption-side 已生效。
立即学习“前端免费学习笔记（深入）”；
- 顶部左对齐：
caption { caption-side: top; text-align: left; } - 底部右对齐：
caption { caption-side: bottom; text-align: right; } - ⚠️ 注意：
caption-side: left或right在 Safari/Firefox 中支持差，WCAG 不推荐横向布局，别用
别用 <h2> 或 <p> 模拟表格标题
视觉上看着像标题，但 JS 无法通过 table.caption 访问，屏幕阅读器不会把它和表格关联，SEO 也收不到语义信号。DOM 中没有 caption 元素，就等于这张表没有标题。
- ❌
<h2>销售数据</h2><table>...</table>→ 无语义绑定 - ✅ 若需底部摘要行（非标题），可用
<tfoot><tr><th scope="row">合计：</th></tr></tfoot>，语义清晰且兼容性好
真正容易被忽略的是：DOM 顺序比 CSS 更优先。位置控制失效，90% 是因为 caption 没坐稳「table 第一个子元素」这个位置——先修结构，再调样式。
