caption-side 属性必须作用于 table 元素且 caption 为 table 的首个子元素，配合标准 doctype 才生效；值仅 top/bottom 跨浏览器兼容，left/right 仅 firefox 支持。
caption-side 属性确实能控制表格标题位置，但必须写对地方、用对值、避开常见陷阱，否则它就“看起来没反应”。
caption-side 必须作用于 table 元素，不是 caption
很多人写成 caption { caption-side: bottom; }，这完全无效。该属性不作用于 caption 本身，而是由其父级 table 控制。
- ✅ 正确写法：
table { caption-side: bottom; }或table.my-table { caption-side: bottom; } - ❌ 错误写法：
caption { caption-side: bottom; }—— 浏览器直接忽略 - ⚠️ 注意：如果用了 CSS 预处理器（如 Sass），确认编译后生成的 CSS 确实包含该规则，而不是被条件编译剔除
caption 必须是 table 的第一个子元素
即使 CSS 写对了，DOM 结构错也会让 caption-side 失效。浏览器只认语义上“属于表格”的 caption，否则它只是普通文本块。
- ✅ 正确结构：
<table> <caption>销售汇总</caption> <thead>...</thead> <tbody>...</tbody> </table> - ❌ 错误结构：
<table> <thead><caption>...</caption></thead>...（塞进 <code>thead）或<caption></caption> <table></table>（放外面） - ⚠️ 补充：用
<h2></h2>模拟标题虽能显示，但屏幕阅读器和 SEO 完全无法识别为表格标题 - IE7 及更早版本完全不支持，只能降级用废弃的
<caption align="bottom"></caption>（不推荐，语义弱） - IE8 要求文档开头必须是标准 DOCTYPE：
，否则退入怪异模式，<code>caption-side直接失效 - PDF 生成器（如 dompdf 2.x）对
bottom渲染不稳定，可能偏移很远；mPDF 8+ 相对可靠，但仍需导出后人工核对 -
left/right是非标准值，仅 Firefox 原生支持，Chrome/Safari/Edge 全部忽略——别在跨浏览器项目里依赖它们 - ✅ 底部居中：
table { caption-side: bottom; } caption { text-align: center; } - ✅ 底部左对齐：
table { caption-side: bottom; } caption { text-align: left; } - ⚠️ 如果只设
table { text-align: left; }，caption不会继承这个对齐方式，但某些旧版 Safari 可能异常，显式设置更稳妥 - ⚠️ 别用
margin-top或position: relative手动推caption—— 破坏语义、响应式易错、打印样式异常
bottom 值的兼容性底线在哪？
caption-side: bottom 在 Chrome 4+、Firefox 2+、Safari 3.1+、Edge 和 IE8+ 中可用，但有硬限制：
为什么标题“到底部了”却不对齐？
caption-side: bottom 只管上下位置，不管左右对齐。默认居中是 CSS 规范强制行为，但会被父级 text-align 干扰。
真正容易被忽略的是：DOM 结构 + CSS 选择器作用对象 + DOCTYPE 三者必须同时正确，caption-side 才会生效。少一个，它就静默失败，连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
