border-collapse: collapse 是解决表格边框重叠的唯一有效方式；它必须作用于 table 元素，合并相邻边框并废除 border-spacing，需配合统一 border 和 padding 才能正确生效。
border-collapse: collapse 是解决边框重叠的唯一有效方式
HTML 表格默认用 border-collapse: separate，每个 td 和 th 都画自己的边框，相邻单元格的边框“堆叠”在一起，视觉上变粗或出现双线——这不是 bug，是规范行为。想让它们真正“重合”，必须显式设为 collapse。
常见错误现象：
- 给
table和td都写了border: 1px solid #000，结果边框看起来是 2px 宽 - 用
border-spacing调整间距，但边框依然不合并（因为border-collapse没改） - 全局 CSS 重置（如
table { border-collapse: separate !important; }）悄悄覆盖了你的设置
实操建议：
- 直接在
table元素上写border-collapse: collapse;，别依赖继承 - 统一用
td, th { border: 1px solid #ccc; }，避免只设部分边（如只设border-right和border-bottom），否则容易漏边 - 如果用了 Bootstrap 或其他 UI 框架，检查其
table样式，可能需要加!important或更高优先级选择器覆盖
border-spacing 只在 separate 模式下起作用
border-spacing 不是用来“重叠”边框的，它是用来控制“分离模式下单元格之间的透明空隙”。一旦你设了 border-collapse: collapse，border-spacing 就彻底失效——DevTools 里甚至可能显示为 invalid。
使用场景：
- 需要保留单元格独立边框（比如做棋盘格、带阴影的卡片式表格）
- 想让列之间留 4px 空隙、行之间留 8px 空隙（
border-spacing: 4px 8px;） - 配合
background-color在间隙中透出底色或背景图
参数差异与陷阱：
- 第一个值是水平间距（列与列之间），第二个是垂直间距（行与行之间），顺序不能颠倒
- 不支持百分比、负值；单位必须是
px、em、rem等合法长度 - 只能作用于
table元素，写在td或tr上完全无效 - 某些框架（如 Ant Design）内部封装了表格组件，
border-spacing可能被封装层拦截，需查文档或 inspect 元素确认生效位置
为什么写了 border-spacing 却没反应？
最常见原因就是 border-collapse 还是 separate 的默认值，但你没意识到它被别的样式覆盖了。
排查步骤：
- 打开 DevTools，选中
table元素，在 Styles 面板里搜索border-collapse，看最终计算值是不是separate - 检查是否有全局重置：比如
*, *::before, *::after { box-sizing: border-box; }本身不影响，但类似table { border-collapse: collapse; }的规则可能被更早加载的 CSS 覆盖 - 注意 IE8+ 才支持
border-spacing，IE7 及更旧版本会忽略，只能退回到 HTML 属性cellspacing="4" - 如果表格嵌套（
table里再套table），外层border-spacing不会影响内层，每层都要单独设置
padding 和 border-spacing 的本质区别
新手常把 padding 当成替代 border-spacing 的方案，这是根本性误解。
padding 是单元格内容到自身边框的距离，border-spacing 是相邻单元格边框之间的距离——前者改变的是单元格内部空间，后者改变的是单元格之间结构空隙。
后果对比：
- 给
td加padding: 10px，单元格实际宽度 = 内容宽 + 20px，整行宽度会撑开，响应式布局易错位 - 用
border-spacing: 10px，间隙是纯透明的，不影响单元格尺寸，背景色、box-shadow 都能透出 - 在
border-collapse: collapse下加padding，会导致边框“浮起”：相邻单元格的边框虽已合并，但 padding 让内容错开，视觉上反而像边框没对齐 - 表头和第一行数据想“隔开”？改
th的padding-bottom，别碰border-spacing
真正麻烦的不是写法，而是动手前先问一句：“我要控制的，到底是单元格之间的空隙，还是内容离自己边框的距离？”——答错这句，后面所有调试都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
