将table设为display:block后border-spacing仍生效的原因咨询

核心结论 #

你对这两个属性生效条件的认知有偏差：它们并非仅在display:table时生效，而是和元素的table布局上下文、元素原生类型直接相关。

具体原因 #

• 原生元素的特性保留：
  

  原生是浏览器默认的table布局容器，哪怕你给它设置display:block

  等）还保持table相关的display值（比如默认的table-row/table-cell），浏览器就会为它创建table布局上下文，border-collapse和border-spacing自然会生效。 CSS规范的定义逻辑： 根据CSS规范，border-collapse和border-spacing属于table层级属性，适用对象是能生成「table box」的元素。这里的table box不仅包括设置了display:table/inline-table的普通元素，还包括原生元素——哪怕你修改了它的display值，只要内部结构符合table布局要求，就会触发这些属性的生效逻辑。 你的代码中的特殊情况 # 看你提供的代码，你把 都设为了display:block，这种情况下table内部已经没有table-cell/table-row来构成table布局，理论上border-spacing应该不会产生效果。如果你实际测试中看到生效，要么是浏览器的兼容性异常，要么是测试时的代码和当前提供的不一致。 验证测试建议 # 测试1：保留的display:blocktr, td { display:block; } 恢复默认的table布局类型，你会看到border-spacing正常生效。 测试2：保留tr, td { display:block; }，此时table内部是块级元素，border-spacing不会产生间距效果，你可以通过检查元素盒模型确认这一点。 内容的提问来源于stack exchange，提问作者Naresh Lohar ，删除这行代码，此时/ 的子元素和

  ，它也不会完全丢失table类元素的底层特性。只要它的内部子元素（/