设为 collapse 才真正合并边框，但必须同时满足三条件：table 设置 border-collapse: collapse、table 和 th/td 均显式声明相同 border、清除 padding 与 border-spacing 干扰。
table的border-collapse属性到底设成什么才真合并边框
设成 collapse 是对的，但光写这一句常常没效果——因为默认边框样式、单元格内边距、以及父容器干扰都会让它“看起来没合并”。真正生效需要三件套同时到位：border-collapse: collapse、border 显式声明、所有 th/td 不能有 padding 或 border-spacing 干扰。
为什么加了collapse还是有双线或空隙
常见错误现象是：明明写了 border-collapse: collapse，表格边框依然像“隔了一层纸”——其实是被其他 CSS 覆盖或忽略。关键干扰点：
-
border-spacing（只对separate生效，但若父元素或 table 上误设为非零值，某些浏览器会降级处理） -
th, td自带默认padding（哪怕边框合并了，内边距仍撑开视觉间隙） -
border没统一设在table、th、td三层上，导致某一层边框“漏出来” - 使用了
outline或box-shadow伪装边框，它们不参与border-collapse
最简可靠写法（含兼容性提醒）
不要只靠 table { border-collapse: collapse }。必须连带控制边界来源和内部留白：
table {
border-collapse: collapse;
border: 1px solid #ccc; /* 关键：table自身要有border */
}
th,
td {
border: 1px solid #ccc; /* 关键：单元格也要有同色同宽border */
padding: 4px; /* 可保留，但别过大；0更保险 */
}
/* 避免意外继承的border-spacing */
table {
border-spacing: 0;
}注意：IE8+ 和所有现代浏览器都支持 collapse，但 Safari 旧版本对 border-radius + collapse 组合渲染异常，慎用圆角。
立即学习“前端免费学习笔记（深入）”；
用JavaScript动态改边框合并方式要注意什么
运行时修改 borderCollapse 不会自动重绘已有边框样式，尤其当单元格已渲染出独立边框后：
- 直接改
table.style.borderCollapse = 'collapse'可能无效，需同步重置th/td的border - 如果表格由框架（如 React/Vue）渲染，避免只改内联样式，优先走 class 切换（例如
table.collapse-border） - 动态插入行/列后，新单元格若没继承
border声明，合并会断裂——建议用 CSS 类统管，而非依赖 JS 补边框
边框合并不是开关式操作，它依赖整套边框树的一致性。最容易被忽略的是：你看到的“缝隙”，90% 来自 padding 或某一层缺失 border，而不是 border-collapse 本身没生效。
