border-collapse必须写在table元素上才生效，写在td、tr或div上无效；需同时设置table和th/td的border才能显示合并边框，且边框样式按宽度>样式>声明顺序优先级胜出。

border-collapse必须写在

上才生效

写在td、tr或外层div上完全没用，浏览器直接忽略。这是边框“看起来没合并”的首要原因。

常见错误包括：

• 把border-collapse: collapse加在th, td { ... }规则里
• 用display: table模拟表格时，忘了给该div也设border-collapse
• 被 Bootstrap 或 normalize.css 默认设为separate，却没用更高优先级覆盖

合并后没边框？因为

和

没显式设border border-collapse: collapse只是“合并逻辑”，不负责“画线”。如果td和th没定义border，那合并的是一条“看不见的线”。 正确写法要三者齐备： table { border-collapse: collapse; } table { border: 1px solid #333; }（控制外边框） th, td { border: 1px solid #333; }（控制内边框，必须显式写） 漏掉最后一条，就只剩一个空壳表格——只有外框，内部全是白的。 为什么合并后边框粗细/颜色不一致？ 合并不是平均，而是按优先级“胜出”：宽度 > 样式（solid > dashed） > 声明顺序（后写的覆盖先写的）。 CSS婚礼策划服务机构宣传网站模板 CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。 下载 典型现象： th { border: 2px solid red; } + td { border: 1px solid gray; } → 横向交界处显示 2px red（宽度胜出） 同宽同样式时，td的规则写在th后面 → td的边框会覆盖th的对应边 想让某单元格只留顶边？得写td { border: none; border-top: 1px solid #000; }，否则none会被邻边“穿透” border-spacing在collapse下完全失效 写了border-collapse: collapse再配border-spacing: 0是白搭，后者直接被忽略。想调单元格间距，唯一有效手段是padding。 注意： th, td { padding: 8px 12px; } 控制文字与边框距离，这才是“呼吸感”的来源 别给table设padding，它不会传递到单元格，纯属无效 若需首行/末列无边框，用th:first-child, td:first-child { border-left: none; }微调 真正容易被忽略的是盒模型变化：启用collapse后，table总宽度 ≠ 所有td宽度之和 + 两倍边框——内部边框不再各自占空间，算宽时得连table自身的border和padding一起看。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！