border-collapse:collapse 无效的主因是未在table上设置或td/th无显式边框；它与border-spacing互斥，合并时按宽＞色深＞后定义规则选取边框。
border-collapse:collapse 为什么表格边框还是没合并？
核心问题往往不是属性写错了，而是父容器或子元素干扰了渲染。默认情况下 border-collapse 只对 <table> 元素本身生效，且必须配合 <code><td>/<code><th> 的边框定义才有可见效果。
<ul><li>
<code>border-collapse 必须设在 <table> 上，写在 <code><tr> 或 <code><div> 外层容器上完全无效
<li>如果 <code><td> 没有显式设置 <code>border（哪怕只是 border: 1px solid #000），合并后可能看起来“没边框”——其实是边框宽度为 0
<table> 的 <code>border-collapse 设为 separate，需手动覆盖
border-collapse:collapse 和 border-spacing 的关系
这两个属性是互斥开关：border-collapse: collapse 会让 border-spacing 完全失效；反过来，只要用了 border-spacing，border-collapse 就只能是 separate。
- 想控制单元格间距？用
border-collapse: separate+border-spacing: 2px - 想让相邻边框合二为一？必须用
border-collapse: collapse，且此时border-spacing值被忽略 - 注意：
border-spacing不支持百分比或负值，只接受长度单位（px、em等）
合并边框时，td/th 的 border 写法影响最终样式
边框合并不是“叠加后取平均”，而是按浏览器规则选取一个边框作为最终渲染结果——通常是“胜出边框”（wider > darker > later in source order）。
- 如果
<td> 设了 <code>border: 2px solid red，而<th> 是 <code>border: 1px solid blue，合并后显示的是 2px red 边框 - 同宽同色时，后定义的元素边框会覆盖先定义的（比如
<tr> 上设的 border 会被 <code><td> 的覆盖） <li>避免意外覆盖：统一在 <code><td> 和 <code><th> 上写相同 border 样式，或只在其中一种上定义 <h3>在现代布局中替代 table 的场景下怎么处理？</h3> <p>用 <code>display: table模拟表格结构时，border-collapse同样适用，但仅限于 display 值为table、table-row、table-cell的元素。立即学习“前端免费学习笔记（深入）”；
-
div[role="table"]这类语义化写法，若没配display: table，border-collapse无效 - Flex 或 Grid 布局里没有“边框合并”概念，强行模拟需要靠
outline或负 margin，但无法真正合并边框计算逻辑 - 响应式表格常配合
@media切换border-collapse，注意 Safari 对动态切换的支持略滞后，建议加transform: translateZ(0)触发重绘
最常被忽略的一点：合并边框后，
<table> 的总宽度 ≠ 所有 <code><td> 宽度之和 + 边框 × 2 —— 因为内部边框被共享了，实际只算一次。调试时别靠肉眼估算，用开发者工具看 computed styles 中的 <code>border和width。 -
