border-collapse: collapse必须写在table元素上才生效，写在td、tr或div上无效；它与border-spacing互斥，合并边框按宽度>样式实度>声明顺序优先级胜出。
border-collapse 不是“边框层叠”，而是边框合并——这个词本身容易误导，很多人照着字面理解去“叠”边框，结果越调越乱。
必须写在 table 元素上，且只对 table 生效；其他地方加了等于没加。
border-collapse: collapse 必须写在 table 上才生效
- 写在
td、tr、外层div或全局选择器里，浏览器直接忽略 - 正确写法只有两种：
- 内联：
<table style="border-collapse: collapse"> - CSS：
table { border-collapse: collapse; }
- 内联：
- 如果用了 Ant Design、Bootstrap 等框架，它们的重置样式可能覆盖你的声明，可临时加
!important验证，但长期应提高选择器权重（比如.my-table table { ... }）
合并后边框粗细/颜色不对？其实是边框“竞争规则”在起作用
border-collapse: collapse 不是简单把两个边框“压成一条”，而是按优先级取胜：
- 宽度优先：2px > 1px
- 样式次之：solid > dashed > dotted
- 声明顺序最后：后写的 CSS 规则更可能生效
常见现象：
立即学习“前端免费学习笔记（深入）”；
-
th设了2px solid red，td是1px solid #666，但表头下边线却显示为 1px —— 因为td的上边框和th的下边框重叠，而td的规则在 CSS 中靠后且宽度更小，但样式/颜色未占优，最终取了td的边框 - 想让表头线显眼？统一设：
th, td { border: 1px solid #ccc; } - 要强制某条线加粗（比如首行底边），用单边控制：
th:first-child { border-bottom: 2px solid #333; }，并确保选择器权重足够
加了 collapse 还有间隙？检查这三个干扰项
-
border-spacing：只要用了collapse，这个属性就完全失效；但如果你在别处写了border-spacing: 2px，它会悄悄把border-collapse降级回separate -
display: block或inline-block：现代浏览器中，border-collapse只在display: table（及其变体如table-cell）下有效；给table设了display: block，等于直接废掉该属性 - 外层容器或父元素设置了
overflow: hidden或transform，可能触发新的层叠上下文，导致边框渲染异常（少见但真实存在）
排查建议：
- 在开发者工具中查看
table元素的 computed 样式，确认border-collapse确实是collapse - 全局搜索 CSS 文件，删掉所有
border-spacing声明 - 检查是否无意中改了
table的display值
border-collapse: collapse 解决的是“怎么画线”，不是“画多宽”或“要不要换行”。小屏上表格横向溢出、内容挤压变形，跟它没关系——那是 width、min-width、overflow-x 或响应式重排的事。最容易被跳过的一步，就是忘了同时设 table { width: 100% } 或 min-width: fit-content，导致 collapse 后表格意外收缩。
