375px视图下td旁异常间隙的成因及解决方法

这个问题我碰到过好多次，大概率是浏览器表格默认样式或者宽度计算规则导致的，咱们一步步拆解：

可能的原因 #

• 默认单元格间距（border-spacing）在作祟：浏览器默认会给<table>设置border-spacing属性（通常是2px），但在高DPR设备（比如Retina屏幕）或者特定视图缩放比例下，这个值会被计算成非整数像素（比如你这里的2.4px左右），左右两边加起来正好是4.8px，导致table总宽度是375.2px，但td的可用宽度被挤掉了这部分间距，看起来就像td旁边有间隙。
• 边框未合并（border-collapse: separate）：表格默认的border-collapse值是separate，也就是边框分开显示，这时候border-spacing的间距会直接生效，不仅是单元格之间，table的边缘和td之间也会出现这个间隙。
• box-sizing属性不统一：如果你的table用了box-sizing: border-box但td还是默认的content-box，当存在border或padding时，宽度计算会出现偏差，不过从你给出的数值来看，这个可能性相对低一些，但也值得排查。

对应的解决办法 #

你可以按优先级尝试以下方案：

1. 强制合并表格边框（最推荐）
   给你的表格添加这个CSS样式：

.header__table--margin--btm {
  border-collapse: collapse;
}

这个属性会直接让表格的边框合并，同时自动清除border-spacing的影响，几乎能解决绝大多数表格间隙问题。

2. 手动清除单元格间距
   如果因为业务需求不能合并边框，直接把间距设为0就行：

.header__table--margin--btm {
  border-spacing: 0;
}

这样间隙会消失，但表格边框还是分开的状态。

3. 统一全局box-sizing
   给所有元素设置统一的盒模型规则，避免宽度计算偏差：

* {
  box-sizing: border-box;
}

这样元素的宽度会包含自身的border和padding，不会再出现“设置100%宽度却实际变窄”的情况。

4. 排查容器与表格的内外边距
   打开浏览器开发者工具（F12）检查.container是否有左右padding，或者header__table--margin--btm是否有左右margin，这些也可能导致视觉上的间隙，但从你描述的宽度数值来看，这个可能性较低。

另外，用开发者工具查看table元素的计算样式，直接看border-spacing和border-collapse的实际值，能快速定位问题根源~

内容的提问来源于stack exchange，提问作者jenlky