caption-side 应作用于 table 元素而非 caption，正确写法为 table { caption-side: bottom; }，IE8 需标准 DOCTYPE 才支持，left/right 非标准且不跨浏览器兼容，JS 操作需用 table.style.captionSide。
直接给 table 元素加 caption-side: bottom
不是给 caption 标签加，也不是用 margin 或 position 模拟——标准做法是把 caption-side 写在 table 的 CSS 规则里。浏览器会自动将 caption 元素重新定位到表格框外底部。
常见错误是写成：caption { caption-side: bottom; }，这无效，因为该属性不作用于 caption 自身，而是作用于其父级 table（或 table-caption 上下文）。
-
table { caption-side: bottom; }✅ 正确且最常用 -
table.my-table { caption-side: bottom; }✅ 支持类选择器，便于局部控制 -
caption { caption-side: bottom; }❌ 无效果，忽略 - 用
display: block+margin-top手动下推caption❌ 破坏语义、响应式易错、打印样式异常
注意 IE8 的 !DOCTYPE 强制要求
IE8 支持 caption-side，但前提是文档必须声明标准模式的 !DOCTYPE，比如 。如果漏掉或用了过渡/框架型 DOCTYPE（如 <code>），IE8 会退回到怪异模式，<code>caption-side 直接失效，标题永远卡在顶部。
- 检查页面开头是否为
（HTML5 最简声明） - 避免混用 XHTML 声明或未闭合的旧式 DOCTYPE
- IE7 及更早版本完全不支持该属性，需用 JS 动态移动节点或放弃兼容
caption-side 的值只有 top 和 bottom 是通用的
Firefox 曾支持非标准的 left / right，但它们不属于 CSS2 规范，Chrome、Safari、Edge 均不识别。若你在代码里写了 caption-side: left;，除 Firefox 外所有浏览器都会忽略，且不会报错——容易误以为“生效了”，实则只在单个浏览器跑通。
立即学习“前端免费学习笔记（深入）”；
- 坚持用
top（默认）或bottom，确保跨浏览器一致 - 不要依赖
left/right实现侧边标题，它们已事实废弃 -
inherit可用，但实际场景极少：只有当父table已设该值，且子嵌套table需继承时才需要
JS 动态切换时用 element.style.captionSide
如果要通过脚本临时翻转标题位置（比如点击按钮切换），必须操作 table 元素的 style.captionSide 属性，而不是 caption 元素。
const table = document.getElementById('myTable');
table.style.captionSide = 'bottom'; // ✅ 生效
// table.querySelector('caption').style.captionSide = 'bottom'; ❌ 无效
注意大小写：JS 中是 captionSide（驼峰），CSS 中是 caption-side（短横线）。漏掉大写 S 或写成 captionside 都会导致静默失败。
真正容易被忽略的是：这个属性只影响视觉位置，不改变 DOM 顺序。即使标题显示在底部，它在 HTML 源码中仍必须写在 <table> 开始标签之后、第一行 <code><tr> 之前——否则语义失效，屏幕阅读器可能跳过或误读。</tr>
