HTML&SVG Web应用中表格移入特定div后单元格间距丢失问题求助

这种表格间距莫名消失的情况我之前排查过好几次，大概率是容器的CSS样式继承或者优先级覆盖在搞鬼，给你几个具体的排查方向：

• 检查habits容器的表格核心样式
  先打开浏览器开发者工具（F12），分别对比表格在main容器和habits容器下的计算样式，重点盯这两个关键属性：

  • border-collapse：如果habits容器下这个值是collapse，而main下是separate，那就是它在搞事——collapse会强制单元格边框合并，自然就没了间距。
  • border-spacing：这个属性直接控制单元格之间的横向/纵向间距，如果在habits下被设为0，间距肯定会消失。

• 排查单元格padding是否被强制覆盖
  有些表格的间距是靠单元格内边距撑起来的，而非border-spacing。检查habits容器有没有针对td/th设置padding: 0的规则，比如类似#habits td { padding: 0; }的样式——ID选择器优先级很高，很容易覆盖表格自身的padding设置。

• 检查全局样式或CSS重置的影响
  看看habits容器有没有引入全局CSS重置规则（比如Normalize.css或者自定义的通配符样式* { margin: 0; padding: 0; }），这些规则可能会重置表格单元格的默认内边距，而main容器刚好有其他样式抵消了这个重置。

• 强制设置表格的间距样式做验证
  可以先给habitruler表格加上明确的高优先级样式，比如：

  .habitruler {
    border-collapse: separate !important;
    border-spacing: 4px !important;
  }
  .habitruler td {
    padding: 6px !important;
  }
  

  如果加上之后间距恢复了，就说明确实是有其他样式在覆盖表格的默认设置，再回头找对应的覆盖规则就行。

• 核对CSS选择器的优先级
  在开发者工具的Styles面板里，看表格和单元格的样式哪些被划掉了（划掉的就是被优先级更高的样式覆盖了），找到对应的规则来源，比如是不是habits容器的ID选择器优先级超过了表格的类选择器。

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