caption必须是table的第一个子元素，否则语义绑定失效；中间不能有换行、注释、空格或不可见字符，否则document.queryselector('table').caption返回null且caption-side无效。
caption 标签必须是 table 的第一个子元素，否则位置控制失效——这不是样式问题，而是语义绑定失败。
caption 必须紧贴 table 开始标签后，中间不能有空格或注释
浏览器和辅助技术（如屏幕阅读器）只认 DOM 中「紧挨着 <table> 之后」的 <code>caption。哪怕中间多一个换行、一个 HTML 注释、甚至一个空格，document.querySelector('table').caption 就返回 null，caption-side 也失去作用对象。
- ✅ 正确：
<table> <caption>销售汇总</caption> <thead>...<li>❌ 错误：<code><table>\n<!-- 备注 -->\n<caption>销售汇总</caption>（换行+注释 → 语义断裂）<li>❌ 更隐蔽错误：<code><table> <caption>销售汇总</caption> <tbody><tr><td>... 中间没其他标签，但开头有不可见 Unicode 空格（比如 U+200B）→ 同样被忽略<h3> <code>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></h2>或<p></p>模拟表格标题视觉上看着像标题，但 JS 无法通过
table.caption访问，屏幕阅读器不会把它和表格关联，SEO 也收不到语义信号。DOM 中没有caption元素，就等于这张表没有标题。- ❌
<h2>销售数据</h2> <table>...</table>→ 无语义绑定 - ✅ 若需底部摘要行（非标题），可用
<tfoot><tr><th scope="row">合计：</th></tr></tfoot>，语义清晰且兼容性好
真正容易被忽略的是：DOM 顺序比 CSS 更优先。位置控制失效，90% 是因为
caption没坐稳「table第一个子元素」这个位置——先修结构，再调样式。 - 检查 DOM 结构是否满足「
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
