未设置display:table的嵌套div为何border-collapse属性仍生效？

我创建了一个包含两个子div的外层div，未给该外层div设置display:table属性，但border-collapse属性却依然生效。相关代码如下：

#tab {
  border: 2px solid black;
  border-collapse: separate;
  border-spacing: 2px;
}

.row {
  display: table-row;
}

.data {
  display: table-cell;
  border: 2px solid;
}

table {
  border: 2px solid;
}

td,
tr {
  display: block;
  padding: 0px;
}

<div id="tab">
  <div class="row">
    <div class="data">Lorem, ipsum.</div>
    <div class="data">Lorem, ipsum.</div>
  </div>
</div>

希望了解该属性生效的原因及适用场景。

生效原因：浏览器的表格布局隐式补全机制 #

CSS表格布局要求遵循「表格容器 → 表格行 → 表格单元格」的层级结构，但如果你的父元素直接包含display: table-row类型的子元素，浏览器会自动补全表格结构：将这个父元素的计算样式display设为table，把它当作表格容器处理。

你的代码中，#tab的直接子元素是.row（display: table-row），所以浏览器自动将#tab识别为表格容器，你给它设置的border-collapse、border-spacing这类表格专属属性自然就能作用于内部的表格单元格.data了。你可以通过浏览器开发者工具查看#tab的计算样式，会发现它的display值已经被隐式设置为table。

适用场景 #

这种特性可以灵活运用于以下场景：

• 替代原生表格：不想使用<table>标签（比如需要更灵活的DOM结构，或避免表格的语义化限制），用div模拟表格布局
• 控制单元格边框：通过border-collapse: collapse实现单元格边框无缝合并，或separate配合border-spacing设置单元格间距
• 垂直居中实现：表格布局天生支持表格单元格内元素的垂直居中，对老旧浏览器兼容性比flex布局更好
• 改造现有DOM：无需添加额外嵌套标签，直接通过CSS将普通div结构转为表格布局

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