caption-side必须作用于table元素而非caption元素，且caption须为table首个子元素，仅支持top和bottom值，需显式设置text-align对齐方式，并注意pdf导出兼容性。
caption-side 必须写在 table 上，不是 caption 上
浏览器只认 table 元素上的 caption-side，写在 caption 标签上完全无效。很多人调试半天发现“没反应”，其实 CSS 根本没被解析。
-
table { caption-side: bottom; }✅ 正确，标题会出现在表格下方 -
caption { caption-side: bottom; }❌ 浏览器直接忽略，W3C 规范明确禁止该用法 - 用 Sass/Less 时，确认编译后生成的 CSS 确实包含这条规则，而不是被条件编译剔除
- JS 动态设置需操作
table.style.captionSide = 'bottom'，不是caption.style.captionSide
caption 必须是 table 的第一个子元素
哪怕 HTML 结构看起来“差不多”，只要 caption 不是 <table> 的首个子节点，<code>caption-side 就失去作用目标——它不是样式不生效，而是语义上已不属于表格标题。
- ✅ 正确：
<table> <caption>销售汇总</caption> <thead>...</thead> <tbody>...</tbody> </table> - ❌ 错误：
<table><thead><caption>...</caption></thead></table>（塞进thead） - ❌ 错误：
<caption>...</caption> <table>...</table>（放 table 外面） - React/Vue 中只要 JSX/模板里
<caption></caption>是<table> 的第一个子元素，就没问题 <li>用 JS 动态插入时，别用 <code>appendChild()往末尾加，要用table.prepend(captionEl)或insertBefore() -
top（默认）和bottom是唯一跨浏览器可靠的值 - IE8 支持
bottom，但前提是文档开头必须有，否则退入怪异模式，属性失效 - IE7 及更早版本完全不识别
caption-side，只能降级用废弃的<caption align="bottom"></caption> - PDF 导出（如 dompdf 2.x）对
bottom渲染偏移严重，mPDF 8+ 相对稳定，但导出后务必人工核对 - 底部居中：
table { caption-side: bottom; } caption { text-align: center; } - 底部左对齐：
table { caption-side: bottom; } caption { text-align: left; } - 别只设
table { text-align: left; }，caption 不会继承这个对齐方式 - 旧版 Safari 对继承行为偶有异常，显式设置
caption { text-align: ... }更稳妥 - 如果 caption 背景被截断，可能是父容器 padding 或 overflow 挤压，给
caption加width: 100%+box-sizing: border-box
只用 top 和 bottom，别碰 left/right
caption-side: left 和 right 不是标准值，仅 Firefox 偶尔支持，Chrome/Safari/Edge 全部无视。生产环境强行使用，等于默认关闭兼容性。
bottom 位置下文字不对齐？得显式设 text-align
caption-side: bottom 只控制上下位置，不负责左右对齐。默认居中是规范行为，但不会继承父级 table 的 text-align；如果 table 设了 text-align: left，又没重置 caption，标题就会左偏到角落，容易误判为“没生效”。
caption-side: bottom 可靠落地，靠的不是单个属性，而是 DOM 结构正确、CSS 选择器精准、对齐方式显式声明、PDF 导出环境单独验证这四件事同时成立。少一个，就可能“看起来没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
