caption-side: bottom 必须写在 table 元素的 css 中，caption 必须是 table 的直接子元素且唯一，需标准 doctype，视觉间距由 caption 的 margin-top 控制，left/right 仅 firefox 支持。
caption-side: bottom 能让表格标题出现在底部，但必须写在 table 元素的 CSS 规则里，而不是 caption 上——写错位置就完全失效。
caption-side 必须作用于 table 元素
这个属性控制的是“表格容器如何安放它的标题”，所以它只对 table 有效。常见错误是写成 caption { caption-side: bottom; }，这毫无作用。
- ✅ 正确写法：
table { caption-side: bottom; } - ✅ 局部生效：
table.data-table { caption-side: bottom; } - ❌ 错误写法：
caption { caption-side: bottom; }（浏览器直接忽略） - ❌ 错误写法：
table { display: grid; } + caption-side（破坏表格渲染上下文，Firefox 尤其敏感）
caption 必须是 table 的直接子元素且仅出现一次
HTML 规范强制要求 caption 必须作为 table 的第一个或最后一个子节点。如果它被包在 div 里、塞进 thead 中、或者页面里有两个 caption，caption-side 就会静默失效。
- ✅ 正确结构：
<table> <caption>标题</caption> <tr>...</tr> </table> - ✅ 也可放末尾：
<table> <tr>...</tr> <caption>标题</caption> </table> - ❌ 错误结构：
<table><thead><caption>标题</caption></thead></table> - ❌ 错误结构：
<table><div><caption>标题</caption></div></table>
IE8 支持但需要标准 DOCTYPE
IE8 是最早支持 caption-side 的 IE 版本，但它只在标准模式下工作。如果文档开头没写 ，而是用了过渡型或混杂模式声明，IE8 就当它不存在。
- ✅ 必须有：
（HTML5 最简声明） - ❌ 无效：
- ❌ 无效：缺 DOCTYPE 或开头有空格/注释
- ⚠️ IE7 及更早版本完全不支持，需用 JS 移动节点或放弃兼容
视觉间距靠 caption 自身 margin 控制，不是 caption-side
caption-side: bottom 只决定“逻辑位置”，实际离表格多远，得靠 caption 的 margin-top（注意：不是 margin-bottom）来调。尤其当 border-collapse: collapse 时，标题容易紧贴表格底边，看起来像没到底部。
- ✅ 推荐加样式：
caption { margin-top: 0.75em; } - ✅ 若表格有
border-bottom，可在tbody上加padding-bottom: 0.5em避免重叠 - ❌ 避免：
table { border-spacing: 0; } + caption { margin: 0; }（视觉上“粘连”） - ❌ 不要用
position: absolute或float挤走caption——它会脱离表格布局流，caption-side失效
left/right 值只在 Firefox 里能用，其他浏览器无视；真正跨浏览器可用的只有 top 和 bottom。别指望靠它做侧边标题，也别在生产环境里赌 Firefox 独占行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
