caption-side:bottom 未生效是因为未作为的第一个子元素，css规范强制要求其必须紧贴开始标签，否则浏览器会忽略该样式并自动置顶渲染。
caption-side:bottom 为什么没生效
直接写 caption-side: bottom 却看不到文字下移？大概率是因为 <caption></caption> 元素没放在 <table> 的最开头——CSS 规范强制要求：<code><caption></caption> 必须是 <table> 的第一个子元素，否则浏览器会忽略 <code>caption-side 样式，甚至自动把它移到顶部渲染。
正确 HTML 结构必须这样写
不是“加了样式就行”，而是结构和样式缺一不可：
@@######@@-
<caption></caption>必须紧贴<table> 开始标签，不能有空格、注释或换行干扰（某些旧版 Safari 对空白敏感） <li>样式可以写在 <code><table> 上，也可以用 CSS 类：<code>.table-with-bottom-caption { caption-side: bottom; } - 不支持
caption-side的 IE（包括 IE11）会无视该声明，始终把<caption></caption>渲染在顶部 - 去掉
<caption></caption>，改用<div class="table-footer">说明文字</div>放在 - 若需保持可访问性（如屏幕阅读器识别表说明），给该
<div> 加 <code>role="region"和aria-labelledby指向表格的id - 不要用
<figcaption></figcaption>—— 它只适用于<figure></figure>，套在<table> 外会破坏表格语义，影响表格导航逻辑 <h3>容易被忽略的细节</h3> <p>即使结构和样式都对，也可能因以下原因出问题：</p> <ul> <li> <code><caption></caption>默认是块级元素，但部分 CSS 重置库（如 normalize.css）会给它设display: table-caption，这个值本身没问题，但若被意外覆盖成inline或flex，caption-side就失效 - Firefox 在某些 zoom 级别下对
caption-side: bottom渲染有微小偏移，不是 bug，是字体度量差异，不用 hack 修复 - 用
position: absolute强行把<caption></caption>拉到底部？别这么做——它会脱离表格流，导致屏幕阅读器无法将其与表格关联
替代方案：当 caption-side 不可用时
如果要兼容 IE 或遇到 SSR 渲染顺序错乱（比如框架把 <caption></caption> 插到中间），别硬扛，改用语义等价但更可控的方式：
margin-top 或 flex 布局模拟底部对齐
<caption></caption> 更省心。
| A | B |
|---|---|
| 1 | 2 |
