caption-side: bottom 仅在DOM结构正确、CSS作用对象为table、渲染上下文未被破坏时生效；caption必须是table的首个或末个直接子元素，且不能嵌套，样式必须写在table上而非caption上。
caption-side: bottom 能生效，但只在三个条件同时满足时才真正起作用：DOM结构正确、CSS作用对象正确、渲染上下文未被破坏。单独加这一行样式，90% 的情况都看不到效果。
caption 必须是 table 的第一个或最后一个直接子元素
浏览器只认 <table><caption>...</caption><thead>...</thead></table> 或 <table><tbody>...</tbody><caption>...</caption></table> 这两种结构。任何嵌套都会让 caption 失去语义绑定：
-
<table><div><caption>...</caption></div></table>→document.querySelector('table').caption返回null -
<table><thead><caption>...</caption></thead></table>→caption不是thead的合法子元素，解析失败 - 哪怕
<table>和<caption>之间有换行符、注释或零宽空格（U+200B），某些浏览器也会拒绝识别
caption-side: bottom 必须写在 table 上，不能写在 caption 上
这是语法错误，不是兼容性问题。浏览器看到 caption { caption-side: bottom; } 会直接忽略该声明：
- ✅ 正确：
table { caption-side: bottom; } - ✅ 局部控制：
table.report-table { caption-side: bottom; } - ❌ 错误：
caption { caption-side: bottom; }（完全无效） - ❌ 错误：
table { display: grid; } caption-side: bottom;（破坏表格渲染上下文，Firefox 尤其敏感）
对齐和间距要单独控制，caption-side 不管这些
caption-side: bottom 只决定标题在表格的“逻辑位置”，不控制文字对齐、垂直距离或背景表现：
- 文字默认居中，但不会继承
table的text-align；必须显式写caption { text-align: center; }或left/right - 标题紧贴表格底部？可能是
border-collapse: collapse导致边框合并，建议给caption加margin-top: 0.5em;（不是margin-bottom）来拉开距离 - 别用
align="bottom"—— 已废弃，Chrome/Safari 早已不支持，仅 IE8/9 和部分旧 Firefox 识别
Firefox 下容易失效的隐蔽点
Firefox 对 caption 的 display 值极其敏感。只要它计算后的 display 不是 table-caption，caption-side 就失效：
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具中
caption的 computeddisplay值，如果不是table-caption，就手动补上：caption { display: table-caption; } - 避免给
table设display: flex或display: grid—— 这会让整个表格脱离原生布局流 - 别在
caption上设position: absolute或float，它会脱离表格容器，失去定位锚点
caption-side 就会静默失效，且控制台不报错。 
