如何实现CSS border-spacing隔行生效，及display:table自定义内容全宽跨行

问题原因说明 #

1. colspan是原生HTML <table> 的专属属性，CSS模拟的table布局（display: table-*系列属性）没有对应的实现规则，无法通过CSS实现跨列效果。
2. border-spacing是全局作用于整个table容器的属性，无法单独控制部分行之间的间距，且table-row元素本身对盒阴影的渲染支持度很差，你之前给.tr加的阴影本身就存在浏览器兼容性问题。

可行实现方案 #

推荐将「主数据行+底部扩展内容」打包为独立的table组，通过控制组间margin实现行间距，完全不需要用到border-spacing，也能完美解决扩展内容跨全宽、无间隙的需求。

调整后的HTML结构

<!-- 外层包裹容器，不需要table布局 -->
<div class="table-container">
  <!-- 每组（主行+扩展信息）为一个独立的table单元 -->
  <div class="row-group">
    <div class="tr">
      <div class="td">aaaa 1</div>
      <div class="td">aaaa 2</div>
      <div class="td">aaaa 3</div>
      <div class="td">aaaa 4</div>
    </div>
    <div class="extra-info">
      extra row of info
    </div>
  </div>

  <!-- 第二行组，自动和上一组拉开间距 -->
  <div class="row-group">
    <div class="tr">
      <div class="td">bbbb 1</div>
      <div class="td">bbbb 2</div>
      <div class="td">bbbb 3</div>
      <div class="td">bbbb 4</div>
    </div>
    <div class="extra-info">
      extra row of info
    </div>
  </div>
</div>

对应CSS代码

.row-group {
  display: table;
  width: 100%;
  background: #fff;
  /* 阴影加在组容器上，不会在主行和扩展行之间漏出 */
  box-shadow: 0px 5px 12px red;
  /* 这里控制行与行之间的间距，可自由调整 */
  margin-bottom: 24px;
}
.tr { 
  display: table-row; 
}
.td { 
  display: table-cell;
  padding: 20px;
}
.extra-info {
  /* 块级元素自动占满整个组的宽度，不需要模拟单元格 */
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
}

方案优势 #

• 扩展内容天然占满全宽，不需要处理跨列逻辑
• 主行和扩展行属于同一个容器，不会出现间隙漏阴影的问题
• 行间距通过margin-bottom控制，比border-spacing更灵活，可单独调整某一行的间距
• 没有兼容性问题，所有支持CSS table的浏览器都能正常渲染

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