不使用border-spacing时如何实现表格行之间的间距分隔

给<tr>设置margin-bottom不生效是CSS标准行为，不是代码bug：表格默认border-collapse: collapse模式下，浏览器会直接忽略<tr>的所有margin属性。你之前给tbody加flex的方案相当于废掉了原生表格的布局逻辑，才会出现列宽不能自动继承、表头和内容对不齐的问题，常规表格场景不建议这么写。

下面两个方案都能实现行间距，且不会破坏原生表格特性： #

方案1：border-spacing 实现（首推） #

完全保留原生表格自动算列宽、自动对齐的特性，不用手动给任何列设宽度，改几行样式就行：

• 给table加border-collapse: separate，关掉默认的边框合并
• 加border-spacing: 0 12px，第二个数值就是你要的行间距，按需改大小
• 行的背景、圆角样式要加在td/th上，别直接加在tr上

样式示例：

.transaction-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 12px; /* 垂直间距12px，水平间距0 */
}

.transaction-table tbody td {
  background: #1f2937; /* 行背景加在单元格上 */
}
/* 要做圆角行的话，给首尾单元格单独加圆角 */
.transaction-table tbody td:first-child {
  border-radius: 8px 0 0 8px;
}
.transaction-table tbody td:last-child {
  border-radius: 0 8px 8px 0;
}

你现有代码只要删掉tbody上的flex flex-col类，给table补上上面的样式就行，其他业务代码不用动。

方案2：透明边框模拟间距 #

如果必须保留border-collapse: collapse的配置，直接给tr加透明的上下边框，用边框宽度当间距：

.transaction-table {
  width: 100%;
  border-collapse: collapse;
}
.transaction-table tbody tr {
  border-bottom: 12px solid transparent; /* 12px透明边做行间距 */
}

这个方案实现简单，但做行圆角、独立行背景的适配比较麻烦，适合不需要给行加特殊样式的简单表格。

原有实现参考 #

你之前写的flex方案代码：

<table className="w-full text-sm text-left lg:table-fixed table-fixed">
  <thead className="text-sm text-white text-opacity-50 font-normal ">
   ...
  </thead>

  {() => (
    <tbody className={classNames({ ' text-white text-sm   flex flex-col': true })}>
      {dataT.map(vt => {
        return <VaultTransactionsRow key={vt.id} {...vt} />
      })}
    </tbody>
  )}
</table>

效果对比：

• 使用flex方案实现的表格效果
• 设置margin-bottom未生效的表格效果

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