caption-side: bottom没生效最常见原因是caption未作为table的第一个或最后一个子元素，必须直接置于table标签内且仅出现一次；若嵌套在thead或div中，或被display、position等样式破坏默认布局流，该属性即失效。
caption-side: bottom 为什么没生效
最常见原因是 caption 元素没放在 <table> 内部最开头或最末尾——CSS 规范强制要求它必须是 <code><table> 的**第一个或最后一个子元素**。如果写在 <code><thead> 里、或者被 <code><div> 包了一层，<code>caption-side 直接失效，浏览器会忽略该声明。
实操建议：
-
caption标签必须直接作为<table> 的子元素，且只能出现一次 <li>不要用 <code>display: block或其他样式覆盖caption的默认display: table-caption - 避免在
caption上设置position: absolute或float，这会让它脱离表格布局流 - 显式写上
caption { display: table-caption; }，防止被重置 - 避免对
table使用非表格类display值（如flex、grid） - 在 Firefox 中测试时，优先用原生
<table> 结构，别套太多 wrapper <h3>bottom 位置和 padding/margin 的叠加影响</h3> <p><code>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> 或 <code><table> 上留空，而不是靠 <code>caption的 margin - 避免同时设置
table { border-spacing: 0; }和caption { margin: 0; }，否则视觉上容易“粘连” - 用
<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"
替代方案：当 caption-side 真的不可用时
有些场景下（比如需要响应式换行、或配合 JS 动态渲染），
caption被迫移出<table>，这时 <code>caption-side失效是必然的。与其强行 hack，不如换思路。实操建议：
真正麻烦的不是样式挪位置，而是让辅助技术也同步理解这个“底部标题”的语义。这点很容易被跳过，但对可访问性很关键。
- 给
Firefox 下 caption-side 不兼容旧写法
Firefox 早期版本（caption-side 的支持依赖于 display: table-caption 的正确继承。如果你重写了 table 的 display（比如改成 display: grid），或者给 caption 设了 display: inline，Firefox 就不认 caption-side: bottom。
验证方法：打开开发者工具，检查 caption 计算后的 display 值是否仍是 table-caption。
实操建议：
