如何为Ant Design可展开Table添加行间距？

Ant Design Table默认采用border-collapse: collapse布局，直接给行添加margin不会生效，这就是你使用rowClassName未达预期的核心原因。以下是两种可行的解决方案：

方案一：修改表格边框布局（推荐） #

通过调整表格的边框布局属性实现行间距，同时配合背景、圆角优化视觉效果，适配可展开行的场景：

1. 给表格行绑定自定义类名：

<Table
  rowClassName={() => "custom-table-row"}
  // 保留你原有其他配置
>
  {/* 原有Column配置 */}
</Table>

2. 添加对应的CSS样式：

/* 修改表格布局，开启行间距 */
.ant-table {
  border-collapse: separate;
  border-spacing: 0 8px; /* 第二个值为垂直间距，可按需调整 */
}

/* 主行添加背景和圆角，让间距更自然 */
.custom-table-row > td {
  background-color: #ffffff;
  border-radius: 8px;
}

/* 处理展开行样式，让其紧贴主行 */
.ant-table-expanded-row > td {
  background-color: #f5f5f5;
  border-radius: 0 0 8px 8px;
  border-spacing: 0;
  margin-top: -8px; /* 抵消主行的间距，避免展开行和主行之间出现空白 */
}

/* 隐藏展开行的默认边框，避免视觉冲突 */
.ant-table-expanded-row .ant-table-cell {
  border: none;
}

方案二：通过内边距模拟间距 #

如果不想修改表格布局，可以给非首行的单元格添加上内边距，模拟行间距：

.custom-table-row:not(:first-child) > td {
  padding-top: 8px;
}

这种方式更简单，但如果行有背景色，间距会被背景填充，视觉效果不如方案一。

注意事项 #

• 若使用Tailwind CSS，可将上述样式替换为对应工具类，比如表格加border-separate border-spacing-y-2，行加bg-white rounded-lg。
• 调整间距数值时，建议和你已用的rounded类圆角大小匹配，保证视觉统一。

内容的提问来源于stack exchange，提问作者Mustafa Aswadi