caption-side必须写在table元素上而非caption上，正确写法为table { caption-side: bottom; }，常见错误包括直接作用于caption、用margin或position模拟、将caption放入thead等；需确保DOCTYPE为<!DOCTYPE html>且caption是table的第一个子元素；底部标题对齐需配合caption的text-align设置；left/right值仅Firefox支持；老旧环境建议用tfoot模拟或JS动态处理。
caption-side 必须写在 table 上，不是 caption 上
直接给 caption 元素加 caption-side: bottom 完全无效——这个属性只作用于 table 元素本身，浏览器靠它识别“这个表格的标题该放哪”。写错位置是 80% 的“没反应”原因。
正确写法只有这一种：
table { caption-side: bottom; }或者带类名：.data-table { caption-side: bottom; }
常见错误包括：
-
caption { caption-side: bottom; }—— 浏览器直接忽略 - 用
margin-top或position: relative手动推caption—— 破坏语义、打印样式错乱、屏幕阅读器无法关联 - 把
caption塞进thead里 —— DOM 结构非法，标题不被识别为语义化标题
bottom 不生效？先检查 DOCTYPE 和 DOM 位置
caption-side: bottom 在 IE8 中能用，但前提是文档必须以标准模式运行。如果开头是 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 或干脆没声明，IE8 就会退到怪异模式，属性彻底失效。
立即学习“前端免费学习笔记（深入）”；
必须确保页面第一行是：
<!DOCTYPE html>
另外，caption 必须是 table 的第一个子元素，顺序必须是：
<table><caption>标题</caption><thead>...</thead></table>任何嵌套或错位（比如包在
div 里、放在 tbody 后）都会导致浏览器不把它当标题处理，caption-side 失去作用对象。
居中/左对齐底部标题？text-align 要显式写在 caption 上
caption 默认水平居中，但这不是继承来的，而是规范强制行为；一旦父 table 设了 text-align: left，这个居中就会被覆盖——除非你单独给 caption 指定对齐方式。
底部居中标题的最小可靠写法：
table { caption-side: bottom; }caption { text-align: center; }
底部左对齐则写：
caption { caption-side: bottom; text-align: left; }注意：不能只写 text-align 不写 caption-side，否则旧版 Safari 可能仍显示在顶部。
补充说明：
-
caption-side控制上下左右方位，text-align控制文字对齐，二者缺一不可 - 不要用
align="bottom"这类 HTML4 属性，已废弃且 IE8+ 也不保证兼容 - left/right 值仅 Firefox 支持，Chrome/Safari/Edge 都无视，跨项目请彻底放弃
PDF 导出或 IE7 等老环境怎么办？别硬扛 caption-side
dompdf（尤其 R&OS CPDF 后端）、某些微信 WebView、IE7 及更早版本，对 caption-side: bottom 的支持极不稳定：可能渲染失败、位置偏移巨大、或直接忽略。这时候强行加 CSS 不如换思路。
可行替代方案：
- 用
<tfoot>+display: table-caption模拟（视觉接近，但语义弱） - JS 动态移动节点：
table.appendChild(table.querySelector('caption'))，再配合table.style.captionSide = 'bottom'（注意是captionSide，不是caption-side） - 导出 PDF 场景下，优先测试 mPDF 8+，并人工核对生成结果；若用 dompdf，建议改用
<div class="table-caption">+ 样式模拟，放弃语义
真正容易被忽略的是：即使所有代码都对，PDF 渲染器和旧浏览器仍可能按自己的逻辑解释 caption。上线前务必在目标环境真机/真 PDF 查验，别信本地 Chrome 的表现。
