直接给出结论：若想让表格边框真正“无缝合并”，不要指望 border-spacing，它不仅无助于合并，反而可能制造干扰。真正实现单元格之间无缝隙连接的方案是 border-collapse: collapse，并且必须将该属性设置在 table 元素上。
开篇先把结论说明，避免大家查阅大量资料后仍然走弯路。下面逐一解析这些关键属性。
为什么设置了 border-spacing 却没有效果？
border-spacing 这个属性仅在 border-collapse: separate（即表格的默认状态）下才会发挥作用。一旦你启用了 border-collapse: collapse，浏览器就会完全忽略 border-spacing。请注意，它们是互斥开关，并非叠加关系。
- 常见误区：有人习惯写
table { border-collapse: collapse; border-spacing: 0; }，以为这样是“双重保险”。但实际上border-spacing这行代码完全是多余的。 - 更隐蔽的问题：某些 UI 框架（例如 Ant Design）可能在全局为
table设置了border-spacing，但未设置border-collapse。此时你添加了collapse，但肉眼观察单元格之间仍有缝隙，容易干扰判断。 - 验证方法：打开开发者工具，直接查看
table的 computed 样式，确认border-collapse确实为collapse，并且没有被更高权重的选择器覆盖。
border-collapse: collapse 必须写在正确的位置
该属性若写在 td、tr 或外层 div 上，将完全无效，浏览器会直接忽略。这并非浏览器的兼容性问题，而是 CSS 规范明确划定的作用域范围。
- 正确写法：
table { border-collapse: collapse; }或者直接在上使用行内样式
style="border-collapse: collapse"。- 错误写法：
td { border-collapse: collapse; }、.wrapper { border-collapse: collapse; }—— 这些均无效。- 框架中的推荐做法：添加一个专门的类名以提高权重，例如
.my-table { border-collapse: collapse; }。除非万不得已，否则不要使用!important。合并后边框粗细和颜色不对？这涉及“边框竞争”规则
许多人认为
border-collapse: collapse会取边框的平均值或进行透明叠加，但实际并非如此。它让相邻的两个边框按照一套优先级进行“竞选”，最终只有胜出者显示：宽度越大优先级越高，其次看样式（solid>dashed>dotted），如果前两项相同，则根据代码中声明的先后顺序，后者覆盖前者。- 举例说明：
th { border-bottom: 2px solid #333; }与td { border-top: 1px solid #666; }同时存在时，这条横线最终会呈现为2px solid #333。 - 但如果
td的规则写在后面，且宽度、样式一致，则其颜色可能会覆盖th的设置。 - 最稳妥的做法是：对
th和td统一设置相同的边框，例如th, td { border: 1px solid #ccc; }，从源头避免交界处出现粗细突变。
还有两个容易忽略的细节：即便已经添加了
collapse，如果table自身没有设置border属性（即使设为border: 1px solid transparent也可以），表格的外边框会直接“消失”，给人留下内部线条成双成对的错觉。另一个细节是，th和td的边框值如果不一致（例如一个用1px，另一个用2px），交界处必然会出现一条更粗的线。这些细节如果不调整，仅靠border-spacing: 0是无法解决的。来源：https://www.php.cn/faq/2788284.html本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。相关推荐
补充同频道和同主题内容，方便继续浏览更多相关内容。
更多同类最新
继续查看同栏目最近更新的文章。
React中使用CSS变量实现组件样式动态隔离的方法
在React中，利用`data-id`属性和CSS属性选择器限定变量作用域，实现组件样式隔离，避免`:root`全局污染。运行时通过`ref`和`setProperty`仅更新当前组件根元素的CSS变量，确保变量仅在该组件DOM树内生效。
Canvas绘制带箭头的贝塞尔路径端点指向计算
Canvas绘制带箭头贝塞尔曲线需计算终点切线方向，三次曲线方向为终点减第二个控制点。将向量单位化后旋转±30°，按固定长度延伸出箭头两顶点，再用路径API绘制实心三角形。注意箭头紧接曲线绘制，避免路径污染。
如何从零开始为Web Worker编写模块化脚本的完整指南
WebWorker模块化脚本利用ES模块与newURL实现零配置可复用结构；也可用Browserify或web-worker库兼容旧环境。需避免DOM操作、使用相对路径、仅通过postMessage通信，由构建工具自动打包。此方式提升代码复用性，避免全局污染，提高开发效率。
CSS网格布局中grid-auto-flow自动流向属性详解及实现方法
grid-auto-flow控制未手动定位元素的填充方向，非自动对齐开关，需配合grid-template等定义轨道生效。dense模式回填空隙但破坏DOM顺序与视觉一致性。实际切换流向应直接重写整套网格定义，默认按行填充，理解这些避免布局混乱。
Vue.js处理大量异步请求的高效调度方案
处理Vue js中大量异步请求的调度方案包括：并行聚合（Promise all）处理独立请求，顺序链式（async await）处理依赖请求，可控并发（分批控制）平衡效率与负载，请求队列实现强管控如令牌续期和防重复提交。
- 错误写法：