caption-side 属性必须作用于 table 元素而非 caption 元素，常见失效原因包括 caption 未作为 table 的首个子元素、错误地对 caption 设置该属性、table 的 text-align 未重置、缺少标准 doctype 导致 ie8 怪异模式等。
caption-side 属性必须作用于 table 元素，而不是 caption 元素本身——写错目标就完全无效。
为什么 caption-side: bottom 没反应？
最常见原因是 DOM 结构或 CSS 作用对象错误：
-
caption标签没放在table的第一个子元素位置（比如被塞进thead或丢到table外面） - 写了
caption { caption-side: bottom; }—— 这条规则被浏览器直接忽略，因为该属性不接受caption为选择器 - 父级
table上设置了text-align: left，而你没重置caption的对齐方式，导致标题左偏、误以为“没动” - 文档缺少标准
，IE8 会退入怪异模式，<code>caption-side直接失效
正确写法与兼容性要点
标准写法只有一种有效路径：给 table 元素加样式：
-
table { caption-side: bottom; }✅ 最简通用写法 -
table.report-table { caption-side: bottom; }✅ 支持类选择器，适合局部控制 -
table.style.captionSide = 'bottom';✅ JS 动态切换时必须操作table的style.captionSide属性 -
caption-side: left或right❌ 仅 Firefox 原生支持，Chrome/Safari/Edge 全部忽略，不要用于生产环境
兼容底线：Chrome 4+、Firefox 2+、Safari 3.1+、Edge、IE8+（需标准 DOCTYPE）；IE7 及更早版本完全不支持，得用 <caption align="bottom"></caption>（HTML4 已废弃但仍有 fallback 效果）。
PDF 导出和移动端容易忽略的坑
视觉上生效 ≠ 实际渲染可靠：
- dompdf 2.x 对
caption-side: bottom支持不稳定，标题可能被画到页面底部几厘米外；mPDF 8+ 较好，但仍需导出后人工核对 - 微信内置 WebView、QQ 浏览器等基于 Android/iOS 系统 WebView，行为等同对应 Chrome/Safari 版本，无需额外兼容处理
- 如果表格用了
float或position: absolute，caption仍会跟随定位，但某些 PDF 引擎会丢失这种关联，建议避免组合使用
真正让底部标题居中且不跑偏，不能只靠 caption-side：必须显式写 caption { text-align: center; }，否则继承自父 table 的 text-align 会覆盖默认居中行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
