caption-side 仅控制 caption 在表格上下左右的摆放位置，不负责文字对齐；文字对齐需用 text-align 显式设置在 caption 元素上，且不继承 table 的设置。
caption-side 是唯一能控制 caption 上下左右位置的 CSS 属性，它不接受 top/bottom 以外的值来“对齐”，只负责“摆放位置”；真正决定文字左右对齐的是 text-align，且必须显式写在 caption 元素上，不会继承 table 的设置。
caption-side: top / bottom 控制标题放哪儿
这个属性只管“标题放在表格的哪一边”，不是“对齐方式”。默认就是 caption-side: top，所以多数时候你不用写它。
-
caption-side: top：标题显示在表格上方（默认行为） -
caption-side: bottom：标题显示在表格下方——但注意，它仍然默认居中，不会自动右对齐或左对齐 -
caption-side: left或caption-side: right：部分浏览器支持（Chrome/Firefox/Safari 仅有限支持），语义和可访问性风险高，不建议用于生产环境 - IE8 及更早版本完全不支持
caption-side，需要 JS 回退或直接放弃兼容
text-align 必须写在 caption 上才生效
caption 是一个独立的块级元素（display: table-caption），它的 text-align 不会从 table 继承。哪怕你给 table 设了 text-align: right，caption 依然居中。
- 顶部居中：
caption { text-align: center; } - 顶部左对齐：
caption { text-align: left; } - 底部右对齐：
table { caption-side: bottom; } caption { text-align: right; } - 别用
float或position: absolute去“模拟”位置——这会让caption脱离表格语义流，屏幕阅读器可能完全忽略它
为什么 caption 放到底部后看起来“没对齐”
常见现象：加了 caption-side: bottom，但标题文字靠左了，或者和表格右边线错开。这不是 bug，是预期行为——caption-side 只改位置，不改对齐；而 caption 默认 text-align: center，但它的“中心”是按自身宽度算的，不是按表格宽度。
- 如果表格有固定宽度（比如
width: 600px），caption默认也会撑满该宽度，此时text-align: center看起来是对齐的 - 如果表格是
width: auto（内容自适应），caption宽度由文字长度决定，text-align: center就只是把那几个字居中，和表格视觉上“脱节” - 解决办法：强制让
caption和表格同宽，再设对齐：caption { width: 100%; text-align: right; }（需配合table { width: 100% }或明确宽度）
辅助技术与可访问性容易被忽略
即使视觉上把 caption 搁到底部、右对齐了，某些屏幕阅读器仍按 HTML 顺序播报——也就是把它当“表格第一行”读，而不是“最后一行”。这不是 CSS 能解决的，而是 DOM 顺序决定的。
-
<caption></caption>必须作为<table> 的第一个子元素，否则语义断裂，W3C 验证失败 <li>不要用 JS 把 <code>caption移动到tfoot后面来“视觉置底”——这破坏了结构语义 - 如果业务强依赖底部标题 + 无障碍播报一致，优先考虑文案调整（比如标题里写明“数据截至2026年7月”），而不是强行视觉置底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
