caption-side 必须作用于 table 元素,且 caption 必须是 table 的第一个子元素;CSS 中 caption { caption-side: bottom } 无效,JS 应操作 table.style.captionSide;text-align 需单独设置在 caption 上以控制对齐;PDF 导出和旧浏览器存在兼容性问题。

caption-side 必须写在 table 上,不是 caption 上
浏览器只认 table { caption-side: bottom; } 这种写法。caption { caption-side: bottom; } 完全无效——CSS 规范明确禁止该属性作用于 caption 元素本身。JS 动态设置也得操作 table.style.captionSide,写成 caption.style.captionSide 就是白忙活。
caption 必须是 table 的第一个子元素
结构错,整个属性就失效。常见错误包括:
-
<table><thead><caption>标题</caption></thead></table>——caption被包进thead,语义丢失 -
<caption>标题</caption><table>...</table>——caption在table外,浏览器不识别为表格标题 - 用了 Vue/React 动态渲染,但
caption节点被条件判断包裹(如v-if或{showCaption && <caption>}),导致 DOM 生成时顺序不稳定
正确结构只有一种:<table><caption>标题</caption><thead>...</thead><tbody>...</tbody></table>
caption-side: bottom 显示偏左?别忘了 text-align
caption-side 只管上下位置,不管文字对齐。如果父级 table 设了 text-align: left,而你没给 caption 单独设 text-align,标题就会缩在左下角,看起来像“没生效”。
立即学习“前端免费学习笔记(深入)”;
- 底部居中:必须显式写
caption { text-align: center; } - 底部右对齐:用
caption { text-align: right; } - 别依赖默认居中——它会被继承覆盖,尤其在全局重置了
text-align的项目里
PDF 导出和旧浏览器的坑比想象中深
视觉上在 Chrome 里跑通 ≠ 实际可用:
-
dompdf 2.x对caption-side: bottom渲染极不稳定,标题常被画到页面底边几厘米外;mPDF 8+好些,但导出后仍需人工核对 - IE8 支持
bottom,但前提是页面开头有<!DOCTYPE html>;缺这个声明,直接退入怪异模式,属性彻底失效 -
caption-side: left和right是 Firefox 私有扩展,Chrome/Safari/Edge 全部忽略,生产环境禁用 - 微信内置 WebView 行为等同对应系统 Chrome 版本,无需额外兼容,但 iOS 15.4 以前的 Safari 会偶发忽略
text-align继承
真正容易被卡住的,从来不是语法写错,而是 DOM 结构 + CSS 选择器权重 + PDF 引擎行为这三者叠加出的“看似没反应”。先查检查器里 caption 是不是 table 的首个子节点,再看 computed 样式里 caption-side 是否真的应用到了 table 上——绕过这两步,调样式就是蒙眼摸象。


















