caption-side: bottom没生效最常见原因是caption未作为table的第一个或最后一个子元素，必须直接置于table标签内且仅出现一次；若嵌套在thead或div中，或被display、position等样式破坏默认布局流，该属性即失效。
caption-side: bottom 为什么没生效
最常见原因是 caption 元素没放在 <table> 内部最开头或最末尾——CSS 规范强制要求它必须是 <table> 的**第一个或最后一个子元素**。如果写在 <thead> 里、或者被 <div> 包了一层，caption-side 直接失效，浏览器会忽略该声明。
实操建议：
-
caption标签必须直接作为<table>的子元素，且只能出现一次 - 不要用
display: block或其他样式覆盖caption的默认display: table-caption - 避免在
caption上设置position: absolute或float，这会让它脱离表格布局流
Firefox 下 caption-side 不兼容旧写法
Firefox 早期版本（caption-side 的支持依赖于 display: table-caption 的正确继承。如果你重写了 table 的 display（比如改成 display: grid），或者给 caption 设了 display: inline，Firefox 就不认 caption-side: bottom。
验证方法：打开开发者工具，检查 caption 计算后的 display 值是否仍是 table-caption。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 显式写上
caption { display: table-caption; }，防止被重置 - 避免对
table使用非表格类display值（如flex、grid） - 在 Firefox 中测试时，优先用原生
<table>结构，别套太多 wrapper
bottom 位置和 padding/margin 的叠加影响
caption-side: bottom 只控制标题在表格的“逻辑位置”，但实际垂直间距由 caption 自身的 margin 和 table 的 border-spacing 或 border-collapse 共同决定。尤其当 border-collapse: collapse 时，caption 和表格底部边框之间可能紧贴，看起来像没到底部。
实操建议：
- 给
caption加margin-top: 0.5em;（不是margin-bottom）来拉开与表格的距离 - 若表格有
border-bottom，考虑用padding-bottom在<tbody>或<table>上留空，而不是靠caption的 margin - 避免同时设置
table { border-spacing: 0; }和caption { margin: 0; }，否则视觉上容易“粘连”
替代方案：当 caption-side 真的不可用时
有些场景下（比如需要响应式换行、或配合 JS 动态渲染），caption 被迫移出 <table>，这时 caption-side 失效是必然的。与其强行 hack，不如换思路。
实操建议：
- 用
<div class="table-wrapper"><table>...</table><div class="table-caption">标题</div></div>，然后用flex或grid控制顺序 - 给
.table-caption加order: 1（父容器设display: flex; flex-direction: column;） - 注意语义性丢失：屏幕阅读器可能不再把该 div 当作表格标题关联，需补
aria-labelledby或role="region"
真正麻烦的不是样式挪位置，而是让辅助技术也同步理解这个“底部标题”的语义。这点很容易被跳过，但对可访问性很关键。
