caption-side: top 时背景宽度由表格内容区决定，bottom 时易因父容器 padding 被截断；left/right 渲染错乱且不推荐；背景未铺满主因 display: table-caption 宽度由内容撑开，需 width: 100% + box-sizing: border-box；caption 未显示多因 DOM 绑定断裂，须确保其为 table 的首个子节点。
caption-side: top 和 bottom 的宽度行为差异
默认 caption-side: top 时，caption 的背景宽度由表格内容区（不含边框）决定；设为 caption-side: bottom 后，背景宽度仍按内容区计算，但若表格本身用了 width: 100% 且父容器有 padding，就容易被截断——不是 CSS 写错了，是渲染盒模型没对齐。
解决办法很直接：
- 给
caption显式加width: 100%，并配合box-sizing: border-box - 确保表格父容器没有意外的
overflow: hidden或padding挤压 - 避免在
table上同时设border-collapse: collapse和width: 100%，这会让底部 caption 的宽度计算更不稳定
caption-side: left/right 在真实项目中基本不可用
caption-side: left 或 right 看似能做侧边标题，但 Safari 和旧版 Firefox 渲染错乱，WCAG 也不推荐——它会让屏幕阅读器顺序混乱，且 background-color 渲染成窄高条状，视觉上像一行文字卡在边上。
真要实现侧边标题，别硬扛 caption-side：
立即学习“前端免费学习笔记（深入）”；
- 用
display: table-caption+transform: rotate()是 hack，可读性差、缩放失真 - 更稳妥的是放弃
caption，改用<div class="table-wrapper"> <h3>标题</h3> <table>...</table> </div>，再靠 CSS 控制布局 - 如果必须语义化，就老实用
caption-side: top或bottom，别碰 left/right
为什么 caption 背景没铺满？先查 DOM 结构再调样式
常见现象：写了 caption { background: #333; color: white; }，但背景只盖住文字区域，左右留白。这不是样式失效，而是 caption 默认 display: table-caption，它的盒模型不参与表格尺寸计算，宽度由内容撑开。
关键修复点：
- 加
width: 100%强制拉伸（注意：必须和box-sizing: border-box配套，否则padding会额外撑宽） - 如果表格用了
border-spacing，caption不继承该间距，背景边缘会露出缝隙——此时需用margin补偿，而非调padding - 某些 PDF 导出库（如 dompdf）对
caption宽度支持弱，导出时背景被裁切，得提前加min-width兜底
caption 放底部却没显示？90% 是 DOM 绑定断裂
写上 caption-side: bottom 却没反应，不是浏览器 bug，而是 caption 根本没被识别为这张表的标题。只要 <table> 和 <code><caption></caption> 之间存在换行、注释、零宽空格（U+200B），document.querySelector('table').caption 就返回 null，CSS 完全无效。
检查和修复步骤：
- 打开开发者工具 Elements 面板，确认
caption是table的第一个子节点，中间无文本节点 - 用编辑器开启「显示空白字符」功能，删掉所有隐藏符号
- 动态插入时别用
innerHTML拼接，改用table.insertAdjacentHTML('afterbegin', '<caption>...</caption>') - 插入后立刻验证：
console.log(table.caption instanceof HTMLElement)，不是就说明绑定失败
真正麻烦的不是样式写不对，而是你根本没拿到那个 DOM 节点——语义断了，后面所有操作都建立在流沙上。
