caption-side: bottom 必须作用于table元素而非caption，且caption必须是table的直接子元素（首或尾），同时需配合text-align控制水平对齐；IE8需标准DOCTYPE，PDF导出可能不识别该属性。

caption-side: bottom 必须写在 table 上，不是 caption 上

直接写 caption { caption-side: bottom; } 是无效的。这个属性控制的是“表格容器如何安放它的标题”，所以它只对 table 元素生效，浏览器会完全忽略作用在 caption 上的该声明。

正确写法是：

table {
  caption-side: bottom;
}

或者更稳妥地限定范围：

.data-table {
  caption-side: bottom;
}

注意：caption-side 不继承，也不作用于伪元素或包裹容器——它只认 table 元素本身。

立即学习“前端免费学习笔记（深入）”；

caption 必须是 table 的第一个或最后一个直接子节点

如果 <caption> 被包在 <thead>、<div> 里，或者出现在 <tr> 后面，浏览器就不再把它识别为语义化标题，caption-side 也就静默失效。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• ✅ 正确结构：<table><caption>标题</caption><tr><td>...</td></tr></table>
• ✅ 也可放末尾：<table><tr><td>...</td></tr><caption>标题</caption></table>
• ❌ 错误结构：<table><thead><caption>标题</caption></thead></table>
• ❌ 错误结构：<table><div><caption>标题</caption></div></table>

caption-side 和 text-align 是两回事，得一起配

caption-side: bottom 只决定标题在表格上方还是下方，不控制文字左右位置。如果你发现标题“掉到底部但缩在左边”，大概率是父级 table 或全局样式设置了 text-align: left，而你没显式重置 caption 的对齐方式。

常见组合写法：

table {
  caption-side: bottom;
}
<p>caption {
text-align: right; /<em> 或 center / left </em>/
}

别依赖默认居中——一旦有继承来的 text-align，它就会覆盖。

IE8 需要标准 DOCTYPE，PDF 导出可能不认 caption

IE8 支持 caption-side: bottom，但前提是文档开头有 <!DOCTYPE html>。没有它，IE8 会退回到怪异模式，属性失效。

更现实的问题是：导出 PDF（比如用 dompdf 或浏览器打印）时，caption 很可能被跳过。SheetJS、Excel 导出库也基本不读取它。如果导出后必须带标题，得在 JS 层手动插入一行，或用 data-caption 属性冗余存储并二次注入。

真正容易被忽略的点是：你调好了视觉效果，却忘了检查屏幕阅读器是否能读出来、导出结果是否包含标题、打印预览是否正常——这些环节都不靠 CSS 渲染，而是靠 DOM 结构和语义完整性。