caption是表格语义结构的强制组成部分，必须作为table的第一个子元素，位置错、数量多或样式乱会导致屏幕阅读器无法识别、table.caption返回null及pdf工具跳过。
caption 不是“加个标题”的可选装饰，而是表格语义结构的强制组成部分——位置错、数量多、样式乱，都会让屏幕阅读器读不到、table.caption 返回 null、PDF 渲染工具（如 dompdf）直接跳过。
caption 必须是 table 的第一个子元素
浏览器和辅助技术靠 DOM 顺序识别标题归属。一旦 caption 出现在 thead、tbody 或任意 tr 之后，它就不再被视作该表格的标题。
- ✅ 正确写法：
<table> <caption>销售汇总</caption> <thead><li>❌ 错误写法：<code><table> <thead><caption>销售汇总</caption></thead>（<code>caption不是thead的合法子元素） - ❌ 更隐蔽错误：
<div class="title">销售汇总</div>+ CSS 定位到表格上方（视觉像，语义为零） - ⚠️ 注意：
table.captionJavaScript 属性只返回第一个且位置合法的caption节点；DOM 中有两个或位置非法，这个属性就是null -
top和bottom：所有主流浏览器支持，但部分旧版 Safari 对bottom渲染偏移异常 -
left和right：Chrome 117+、Safari 16.4+ 起稳定，Firefox 旧版本不支持 - 稳妥写法（兼容性优先）：
table caption { caption-side: top; text-align: left; } - 若必须底部显示，优先考虑用
<tfoot><tr><th colspan="N">数据截至2024年9月</th></tr></tfoot>模拟摘要行（语义不同但 dompdf 兼容性更好） - 设
display: block→ 屏幕阅读器可能跳过，table.caption失效 - 设
position: absolute→ 标题脱离表格流，打印或 PDF 渲染时易错位 - 避免
display: none或visibility: hidden—— 这等于删除语义 - 安全强化方式：
font-weight: bold、background-color: #f5f5f5、padding: 8px等不影响布局的样式 - 正确做法：用
insertBefore()插入到第一个子节点前，或用prepend() - 示例：
table.prepend(captionEl)安全可靠 - 用
innerHTML拼接时，确保<caption></caption>出现在字符串最开头，紧跟<table> <li>React/Vue 中，只要 JSX/模板里 <code>caption是table的第一个子元素，就没问题
caption-side 控制位置但兼容性有限
caption 默认在表格上方居中，用 caption-side 可切换方位，但并非所有值都稳：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
重置 caption 样式时别破坏语义绑定
caption 的默认 display 是 table-caption，这是内建的表格布局上下文。强行覆盖会切断它与表格的语义绑定：
动态插入 caption 时注意 DOM 插入顺序
用 JavaScript 创建表格后想加标题？别用 appendChild() 往 <table> 末尾塞 —— 这会让 <code>caption 变成最后一个子元素，无效。
最容易被忽略的是：多语言标题必须显式声明 lang 属性。当表格内容是中文，而 caption 是英文（如 "Q3 Financial Summary"），不加 lang 会导致语音合成器按页面默认语言发音，语义混淆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
