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> 和 <code><caption></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 只决定标题在表格的“逻辑位置”，不控制文字对齐、垂直距离或背景表现：

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载
  • 文字默认居中，但不会继承 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 的 computed display 值，如果不是 table-caption，就手动补上：caption { display: table-caption; }
  • 避免给 table 设 display: flex 或 display: grid —— 这会让整个表格脱离原生布局流
  • 别在 caption 上设 position: absolute 或 float，它会脱离表格容器，失去定位锚点
  真正卡住人的地方不在 CSS 写法本身，而在 DOM 结构是否“干净”——中间多一个空格、少一个闭合标签、套一层 wrapper，caption-side 就会静默失效，且控制台不报错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！