table边框重叠不生效需设border-collapse: collapse于table元素本身；启用后按宽>样式>颜色优先级合并边框；border-spacing与collapse互斥；display: block会使collapse失效。
table边框重叠显示不生效？检查border-collapse是否设对了
默认情况下，table的单元格边框是分离的（border-collapse: separate），看起来像双线或错位。要让相邻边框“合并成一条”，必须显式设置border-collapse: collapse，且该样式需作用于table元素本身——不是td，也不是tr，更不能只写在th上。
常见错误：给td单独加border却不设table的border-collapse，结果边框依然双倍粗、有间隙。
-
border-collapse: collapse必须写在table选择器上，例如table { border-collapse: collapse; } - 如果用了
!important覆盖了框架默认样式（比如某些UI库重置了table），要确认它没被更高优先级规则干掉 - 部分老版本IE（如IE7）不支持
collapse值，但现代项目基本可忽略
合并后边框粗细不一致？注意border冲突规则
当border-collapse: collapse启用后，相邻单元格或单元格与表格边框之间发生边框“竞争”：浏览器按特定优先级取其中最粗、最实、颜色最深的一条作为最终显示边框。这不是bug，是CSS规范行为。
典型表现：明明th设了2px solid red，td是1px solid gray，但横向边框却显示为1px——因为td的上下边框和th的下边框重叠，而td的边框声明在CSS中位置靠后，覆盖了th的。
- 边框“胜出”顺序：宽度 > 样式（
solid>dashed） > 颜色（深色优先，但非绝对） - 避免意外覆盖：统一在
table或td, th上定义边框，别混用tr和td分别设 - 想强制某一边框生效？直接给对应单元格加
border-top等单边属性，并确保其CSS权重足够
需要内边框但不要外边框？用border-spacing配合collapse不行
border-collapse: collapse和border-spacing互斥——后者只在separate模式下有效。所以别试border-collapse: collapse; border-spacing: 0;这种组合，border-spacing会被忽略。
真要实现“只有内部线条、外部无框”，得换思路：保留collapse，然后用table自身的border设为none或透明，再靠td/th的边框撑出内线效果。
- 清除外边框：
table { border: none; }或table { border: 1px solid transparent; } - 确保内线清晰：
td, th { border: 1px solid #ccc; }，此时横向/纵向相邻边框会自动合并为单线 - 首行/末行/首列/末列可能多出半条线？用
:first-child/:last-child微调，例如td:first-child, th:first-child { border-left: none; }
响应式表格里border-collapse突然失效？留意display: block干扰
很多响应式方案会给table加display: block并套div滚动容器，这时border-collapse会彻底失效——因为该属性只对display: table及其子元素（table-row等）生效。
一旦table变成block，它就不再是表格渲染上下文，所有collapse逻辑归零，退化为普通块级元素的边框叠加。
- 验证方法：浏览器开发者工具里看
table计算后的display值，如果不是table，border-collapse无效 - 替代方案：不用
display: block，改用overflow-x: auto直接作用于table父容器；或者用@media在小屏下切换为语义化div结构，而非硬套displayhack - 某些CSS重置库（如Normalize.css）会把
table设为border-collapse: collapse，但自定义样式若写成table { display: block; }，等于主动放弃该特性
边框合并看着简单，实际卡点全在渲染上下文和层叠优先级上。最容易被忽略的是：它不是“让边框变细”的开关，而是开启一套独立的边框仲裁机制——你得先让浏览器承认这是个真正的table，它才肯按规则办事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
