border-collapse不生效是因为未设置边框，必须为th、td或table显式定义border；caption-side异常源于书写模式影响，需显式声明；合并边框后内边距表现异常是因盒模型计算变化，调试推荐用outline。
table 的 border-collapse 不生效？先看是否漏了 border
很多人设了 border-collapse: collapse 却发现边框还是双线，根本原因是：这个属性只控制「已有边框」如何合并，它本身不画边框。
表格单元格默认没有 border，所以即使合并了，也看不见效果。
- 必须给
th、td或table显式设置border（比如border: 1px solid #000） -
border-collapse: collapse对border-style: hidden也有效，可用于隐藏特定边 - IE8+ 支持，但 IE7 及更早版本只支持
collapse，不支持separate的细调（如border-spacing）
caption 元素跑到表格底部？检查 caption-side 值和书写模式
caption-side 默认是 top，但一旦表格或其父容器设置了 direction: rtl 或 writing-mode: vertical-rl，行为可能意外变化——尤其在 Safari 和旧版 Firefox 中。
- 显式写
caption-side: top或bottom能避免继承干扰 -
caption-side: bottom在打印样式中容易被忽略，导致页脚 caption 被截断 - 不要依赖默认值，特别是在组件化 CSS 或 Shadow DOM 场景下，继承链可能断裂
合并边框后内边距变奇怪？那是 border-collapse 改变了盒模型计算方式
当 border-collapse: collapse 生效时，padding 依然作用于单元格，但相邻单元格的边框会共用像素，视觉上容易误判间距来源。
- 横向相邻
td的左右border合并为一条，但各自的padding-left/padding-right仍独立存在 - 想统一控制内容到边框的距离，优先调
padding，而不是靠缩放border-width - 用
outline临时调试（比如outline: 1px dashed red），能看清真实盒边界，避开边框合并干扰
响应式表格里 caption-side 切换方向，别只靠媒体查询硬切
在小屏把表格横转竖（比如用 display: block 模拟）时，直接改 caption-side 往往不够——因为 caption 是块级元素，它的定位逻辑会随表格 display 类型改变而失效。
- 移动端更可靠的做法：用
flex或grid重构表头+数据结构，而非强撑原生table - 如果必须保留
table，可配合visibility: hidden+position: absolute手动重定位caption -
caption-side不触发重排（reflow），但切换后若内容高度变化，可能引发布局抖动，需留意
真正难的不是记住这两个属性怎么写，而是当表格嵌在框架组件里、又被 CSS-in-JS 注入样式时，border-collapse 的层叠顺序和 caption-side 的继承源头常常藏得极深——这时候查 computed styles 比翻文档管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
