caption 默认 display: table-caption，直接设 background-color 无效因只覆盖文字区域；需显式设 display: table-caption、padding、text-align，并注意 caption-side、border-collapse、border-radius 及 ie 兼容性问题。
直接给 caption 设置 background-color 无效？
因为 caption 默认是 inline 元素，且浏览器会自动添加 margin 和 display 行为（通常是 display: table-caption），直接写 background-color: #4a90e2; 可能不生效或只覆盖文字区域，留白处仍是透明。
必须显式设置 display: block 或保留默认 table-caption 并配合 padding 和 width 控制范围。更稳妥的做法是：
- 始终为
caption指定display: table-caption（默认值，但显式声明可避免重置干扰） - 加上
padding防止背景色被文字“挤窄” - 用
text-align控制标题对齐，避免背景色左右溢出或收缩 - 若需全宽背景，需确保父
table没有border-collapse: collapse以外的 padding 或 margin 干扰
caption 的位置影响背景渲染方式
caption 的 caption-side 属性决定它在表格上方（top，默认）、下方（bottom）、左侧或右侧。不同位置下，背景表现差异明显：
-
caption-side: top或bottom：背景宽度默认撑满表格内容宽度（不含边框），但若表格设了width: 100%且父容器有 padding，可能被截断 -
caption-side: left/right：caption变成竖排块，此时background-color会按实际行高+padding 渲染，容易显得“窄高”，需手动设height或line-height - 无论哪种位置，都建议加
box-sizing: border-box，让padding不撑大整体尺寸
兼容老浏览器时 caption 背景的坑
IE8–IE11 对 caption 的 background 支持不稳定，尤其在 border-collapse: collapse + caption-side: top 组合下，背景常只显示在文字下方、左右留白透出父容器色。
绕过方案（无需 JS）：
- 不用
background-color，改用background: linear-gradient(to right, #4a90e2, #4a90e2)—— IE9+ 对渐变背景的 caption 渲染更可靠 - 给
caption外层包一个div（但破坏语义，不推荐） - 退而求其次：放弃纯色背景，改用
color+font-weight+text-shadow做视觉强化（如text-shadow: 1px 1px 2px rgba(0,0,0,0.1)） - 确认是否真需要 caption 背景——很多时候，把标题提至
table外、用h2+margin-bottom更可控
和 thead 表头背景混用时的层级冲突
如果同时设置了 caption 背景和 thead th 背景，注意它们不在同一 stacking context。常见误判是以为 caption 在 thead 上方就“盖得住”，其实：
-
caption渲染在表格盒模型最外层，thead在内部，二者无 z-index 关系 - 当
caption-side: top且table有border，caption 的 background 可能被 border “压住”边缘，看起来像没铺满 - 真正要统一顶部视觉，建议只选一种：要么用
caption做主标题背景，thead仅做列名；要么去掉caption，用thead第一行th合并单元格模拟标题栏（colspan+background）
最易被忽略的是：caption 的 background 不会自动继承 table 的 border-radius，哪怕 table 设了 border-radius: 8px，caption 依然直角——需要单独给 caption 加 border-top-left-radius 和 border-top-right-radius 才匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
