caption-side: bottom 仅在DOM结构正确（caption为table直接子元素）、CSS作用于table元素、渲染上下文未被破坏（如display未被修改）三者同时满足时才生效，缺一不可。
caption-side: bottom 能把标题放到表格底部，但光写这一条几乎总失效——它依赖三个刚性条件同时成立：DOM结构正确、CSS作用对象正确、渲染上下文没被破坏。
caption 必须是 table 的第一个或最后一个直接子元素
浏览器只认 <table><caption>...</caption><thead>...</thead></table> 或 <table><tbody>...</tbody><caption>...</caption></table> 这两种结构。哪怕中间插个换行、注释、<!-- --> 或零宽空格（U+200B），document.querySelector('table').caption 就返回 null，CSS 更无从生效。
常见错误包括：
-
<table><thead><caption>...</caption></thead></table>（caption不是thead的合法子元素） -
<table><div><caption>...</caption></div></table>（caption被包裹，语义断裂） - 用 JS 动态插入时，没用
appendChild()直接加到table上，而是塞进了某个tr或tbody
caption-side 必须作用在 table 元素上，不是 caption
caption { caption-side: bottom; } 这行 CSS 完全无效——不是兼容性问题，是语法错误。该属性只接受 table 系元素为选择器，浏览器会直接忽略。
立即学习“前端免费学习笔记（深入）”；
正确写法只有：
table { caption-side: bottom; }-
table.report-table { caption-side: bottom; }（推荐，避免全局污染） -
table.style.captionSide = 'bottom';（JS 动态设置时必须操作table的style）
如果用了 display: grid 或 display: flex 改写了 table 的 display 值，caption-side 会彻底失效——Firefox 尤其敏感，因为这破坏了表格的渲染上下文。
caption 文字对齐必须显式控制，不能靠默认
caption-side: bottom 只决定标题在表格上方还是下方，不控制文字左右对齐。如果父级 table 设了 text-align: left，而你没重置 caption 的对齐方式，标题就会缩在左下角，看起来像“根本没动”。
所以必须配合：
- 底部居中：
caption { text-align: center; } - 底部右对齐：
caption { text-align: right; } - 不要依赖继承，显式声明更可靠
另外，caption 默认 display: table-caption。如果被其他样式覆盖成 inline 或 block，Firefox 可能拒认 caption-side。保险起见可加一句：caption { display: table-caption; }。
PDF 导出和移动端容易忽略的坑
视觉上生效 ≠ 实际渲染可靠：
-
dompdf 2.x对caption-side: bottom支持极不稳定，标题常被画到页面底部几厘米外；mPDF 8+较好，但仍需导出后人工核对 - 微信内置 WebView、QQ 浏览器等行为等同对应 Chrome/Safari 版本，无需额外兼容
- 如果表格用了
float或position: absolute，caption仍会跟随定位，但某些 PDF 引擎会丢失这种关联，建议避免组合使用 - 当
border-collapse: collapse时，caption和表格底部边框可能紧贴，显得“没到底部”——这时该给caption加margin-top: 0.5em，而不是margin-bottom
真正让底部标题稳稳落位，靠的不是单个属性，而是 DOM、CSS、渲染三者咬合——漏掉任何一环，caption-side: bottom 都只是纸上代码。
