首先，一个核心结论必须牢记：border-collapse: collapse 这个属性，只能写在 table 元素上才能生效，这是无数前端新手踩过最深的坑。
border-collapse: collapse 必须写在 table 元素上才生效
如果你把这个属性写在 td、tr 或者外层 div 上，试试看就会发现，完全不起作用，浏览器直接无视。这正是90%的开发者遇到“加了没反应”问题的根源。
正确的做法只有两种：
- 在CSS中写：
table { border-collapse: collapse; } - 行内样式直接加在
table标签上：如果你使用的是 Ant Design、Bootstrap 这类框架，它们往往会默认设置
table { border-collapse: separate; }。这时需要检查一下 computed 样式，确认是否被覆盖。临时可以用!important验证效果，但长期来看，还是应该提高选择器权重（比如加个类名）。为什么写了 collapse 还有白缝或双线
不是属性失效，而是配套没有跟上，或者存在冲突。
- border-spacing 与 border-collapse: collapse 互斥：只要存在任何
border-spacing声明（包括框架注入的），collapse就会自动降级为separate。必须全局搜索并删除所有border-spacing。 - table 的 display 值不能是 block、inline-block 等非表格值，否则
border-collapse失效。如果需要布局控制，改用width、margin。 - th 和 td 没有设 border，或者边框宽度/样式不统一（比如一个
1px solid，另一个2px dashed），合并后交界处会粗细不均，甚至“消失”。 - 父容器设置了 font-size: 0 或 HTML 换行产生的空格，也会在表格底部或右侧留下微小间隙，需要额外清除。
border-collapse 启用后边框怎么控制才不出错
这个属性不是简单的“取平均值”，相邻边框会按三重优先级竞争胜出：
- 宽度最大者胜出（
2px > 1px） - 样式更实者胜出（
solid > dashed > dotted） - 声明顺序靠后者胜出（CSS文件中后写的规则、更高权重的选择器）
所以，想统一内线风格，就写
th, td { border: 1px solid #ccc; }，不要让th和td的边框值不同。想突出某行或某列，不要给tr设置边框（tr上的border在collapse模式下基本无效），而是操作td:last-child或tr:first-child td。另外，border: none不参与合并计算，会被其他方向的边框“穿透”，要用单边属性替代，比如td { border-top: 1px solid #000; border-right: none; }。想只显示内线、隐藏外框该怎么配
不要尝试那种组合：
border-collapse: collapse; border-spacing: 0;——border-spacing在collapse模式下完全无效，纯属冗余。真正正确的做法是：
- 先确保
table { border-collapse: collapse; } - 再用
table { border: none; }或table { border: 1px solid transparent; }隐藏外框（后者比none更安全，避免破坏合并逻辑） - 最后靠
th, td { border: 1px solid #ccc; }控制内线，同时清空padding：th, td { padding: 0; }，否则视觉上的缝隙其实是padding撑开的
还有一个容易忽略的细节：启用
border-collapse: collapse后，表格的盒模型行为已经改变——内部边框被合并计算，table的总宽度 ≠ 所有td宽度之和 + 边框 × 2。调试的时候，需要连同table的border和padding一起查看。来源：https://www.php.cn/faq/2812819.html本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。相关推荐
补充同频道和同主题内容，方便继续浏览更多相关内容。
更多同类最新
继续查看同栏目最近更新的文章。
CSS星空背景遮挡页面链接的有效修复方法
CSS星空背景元素因绝对定位与高z-index覆盖视口，导致底层链接的鼠标事件被屏蔽。为纯装饰层添加`pointer-events:none`属性，可透传鼠标事件，恢复链接交互，且不影响动画渲染与性能表现。这样既保留视觉装饰，又确保用户正常点击底层链接。
组合键Ctrl+C触发不同音符的播放方法
通过监听键盘事件并检测修饰键状态，实现同一字母键在不同组合下播放不同音符。需注意使用event ctrlKey正确拼写，调用preventDefault阻止默认行为，统一转小写，并考虑重复触发过滤。可扩展的键映射方案便于维护。
Vue与Three.js实现人物奔跑3D场景
基于Vue与Three js构建人物奔跑场景：人物加载GLTF骨骼动画原地循环跑步，巨型草坪平面持续向后平移，营造无限奔跑错觉，并添加线性白雾增强空间层次，代码工程化实现。
CSS :has()父选择器根据图片是否存在调整文字宽度
聊聊` card:has(img)`和` card:not(:has(img))`的真实用法 这两个组合是目前最稳定、纯粹基于DOM结构进行判断的方案。适用场景非常明确： * ` card:has(img) text`：当卡片里有``标签时，文字容器收窄，比如设为`width: 70%`，
正确使用回调函数实现链式调用多个函数
本文深入解析回调函数链式调用的常见误区和正确用法，通过修复 a → b → c 顺序执行失败的典型问题，阐明回调传递的核心本质：传递函数引用而非调用结果，并提供可运行的代码示例与关键注意事项，帮助开发者彻底掌握回调函数链式调用写法。 在实际项目开发中，利用回调函数实现 a → b → c 这样的顺序
- border-spacing 与 border-collapse: collapse 互斥：只要存在任何