caption放表格底部必须同时满足dom结构正确（caption为table直接子元素）、css中caption-side: bottom作用于table而非caption、且配合text-align控制对齐，三者缺一不可。
caption 放表格底部不是靠“把它写在 <table> 末尾”就行，而是必须同时满足 DOM 结构、CSS 属性和渲染上下文三重条件。只改位置或只加样式，90% 的情况都失效。
<h3>caption-side: bottom 必须作用于 table 元素，不能写在 caption 上</h3>
<p>这个属性控制的是“表格容器如何安放它的标题”，所以它只对 <code>table 有效。浏览器看到 caption { caption-side: bottom; } 会直接忽略——这不是兼容性问题，是语法错误。
- ✅ 正确：
table { caption-side: bottom; } - ✅ 局部生效：
table.report-table { caption-side: bottom; } - ❌ 错误：
caption { caption-side: bottom; }（完全无效） - ❌ 错误：
table { display: grid; }后再设caption-side（破坏表格渲染上下文，Firefox 尤其敏感）
caption 必须是 table 的第一个或最后一个直接子元素
HTML 规范强制要求 <caption></caption> 是 <table> 的直接子节点，且只能出现一次。放错位置，DOM 就不认它为标题，CSS 更无从生效。
<ul>
<li>✅ 正确（开头）：<code><table>
<caption>销售汇总</caption>
<thead>...</thead>
</table>
<table>
<tr>...</tr>
<caption>销售汇总</caption>
</table>
<table><thead><caption>...</caption></thead></table>（caption 不是 thead 的合法子元素）<table><div><caption>...</caption></div></table>（caption 被包裹，失去语义绑定）<table> 和 <code><caption></caption> 之间有换行、注释或零宽空格（U+200B），document.querySelector('table').caption 就返回 null
caption-side 和 text-align 必须配合使用
caption-side 只决定标题在表格上方还是下方，不控制文字对齐。如果父级 table 设了 text-align: left，而你没显式设置 caption 的对齐方式，标题就会缩在左下角，看起来像“没动”。
- ✅ 底部居右：
table { caption-side: bottom; } caption { text-align: right; } - ✅ 底部居中（显式声明，不依赖默认）：
caption { text-align: center; } - ❌ 仅写
caption-side: bottom，不设text-align→ 文字对齐受父级table继承影响，行为不可控 - ❌ 用
margin-left或padding“推”位置 → 破坏语义结构，屏幕阅读器无法正确播报
别用 align="bottom" —— 它已过时且兼容性差
<caption align="bottom"></caption> 是 HTML4 的遗留写法，HTML5 已废弃。现代浏览器虽部分支持，但行为不一致：
- Chrome/Safari：只支持
top和bottom - Firefox：支持
left/right/top/bottom，但left/right渲染不稳定 - IE9+：仅支持
top/bottom - ✅ 唯一推荐路径：用标准 CSS
caption-side+ 正确 DOM 结构
最容易被忽略的点是：DOM 结构断裂比 CSS 写错更常见。检查时先看开发者工具里 <caption></caption> 是否真的挂在 <table> 下面、是否唯一、中间有没有看不见的字符——这比调样式优先级更重要。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
