caption-side 必须作用于 table 元素，且 caption 必须是 table 的第一个子元素；CSS 中 caption { caption-side: bottom } 无效，JS 应操作 table.style.captionSide；text-align 需单独设置在 caption 上以控制对齐；PDF 导出和旧浏览器存在兼容性问题。
caption-side 必须写在 table 上，不是 caption 上
浏览器只认 table { caption-side: bottom; } 这种写法。caption { caption-side: bottom; } 完全无效——CSS 规范明确禁止该属性作用于 caption 元素本身。JS 动态设置也得操作 table.style.captionSide，写成 caption.style.captionSide 就是白忙活。
caption 必须是 table 的第一个子元素
结构错，整个属性就失效。常见错误包括：
-
<table><thead><caption>标题</caption></thead></table>——caption被包进thead，语义丢失 -
<caption>标题</caption><table>...</table>——caption在table外，浏览器不识别为表格标题 - 用了 Vue/React 动态渲染，但
caption节点被条件判断包裹（如v-if或{showCaption && <caption>}），导致 DOM 生成时顺序不稳定
正确结构只有一种：<table><caption>标题</caption><thead>...</thead><tbody>...</tbody></table>
caption-side: bottom 显示偏左？别忘了 text-align
caption-side 只管上下位置，不管文字对齐。如果父级 table 设了 text-align: left，而你没给 caption 单独设 text-align，标题就会缩在左下角，看起来像“没生效”。
立即学习“前端免费学习笔记（深入）”；
- 底部居中：必须显式写
caption { text-align: center; } - 底部右对齐：用
caption { text-align: right; } - 别依赖默认居中——它会被继承覆盖，尤其在全局重置了
text-align的项目里
PDF 导出和旧浏览器的坑比想象中深
视觉上在 Chrome 里跑通 ≠ 实际可用：
-
dompdf 2.x对caption-side: bottom渲染极不稳定，标题常被画到页面底边几厘米外；mPDF 8+好些，但导出后仍需人工核对 - IE8 支持
bottom，但前提是页面开头有<!DOCTYPE html>；缺这个声明，直接退入怪异模式，属性彻底失效 -
caption-side: left和right是 Firefox 私有扩展，Chrome/Safari/Edge 全部忽略，生产环境禁用 - 微信内置 WebView 行为等同对应系统 Chrome 版本，无需额外兼容，但 iOS 15.4 以前的 Safari 会偶发忽略
text-align继承
真正容易被卡住的，从来不是语法写错，而是 DOM 结构 + CSS 选择器权重 + PDF 引擎行为这三者叠加出的“看似没反应”。先查检查器里 caption 是不是 table 的首个子节点，再看 computed 样式里 caption-side 是否真的应用到了 table 上——绕过这两步，调样式就是蒙眼摸象。
