如何在Angular Material表格（含13版本）的表头与表体之间添加间距？已尝试方案无效寻求解决方法

嘿，我来帮你搞定这个头疼的间距问题！你之前尝试的方案没生效，大概率是踩了Angular样式封装的坑，或者没注意到table-row元素默认不支持margin属性的细节。下面给你两种实用的解决方案，按需选择就行：

方案一：仅给表头和表体之间加专属间距（表体行之间无间距） #

这个方案适合你只想拉开表头和第一行数据距离的场景，步骤如下：

1. 在组件的CSS文件里添加穿透样式（因为Angular组件样式默认是封装的，需要用::ng-deep突破限制，或者把样式直接放到全局styles.css文件里）：

::ng-deep .mat-table {
  border-collapse: separate;
}

::ng-deep .mat-header-row {
  position: relative;
}

/* 用伪元素模拟表头下方的空白间距 */
::ng-deep .mat-header-row::after {
  content: '';
  position: absolute;
  bottom: -12px; /* 这里调整你想要的间距大小 */
  left: 0;
  width: 100%;
  height: 12px;
  background-color: transparent; /* 保持和页面背景一致 */
}

/* 让表体整体下移，避免和伪元素重叠 */
::ng-deep .mat-row {
  position: relative;
  top: 12px;
}

2. 保持你的表格HTML结构不变，刷新页面就能看到表头和表体之间的明显间距啦！

方案二：表头与表体、表体行之间都加统一间距 #

如果你希望所有行（包括表体内部的行）之间都有一致的垂直间距，这个方法更简单直接：

同样在组件CSS或全局样式里添加：

::ng-deep .mat-table {
  border-collapse: separate;
  border-spacing: 0 12px; /* 第一个值是列间距，第二个是行间距，按需调整数值 */
}

这个方法利用表格原生的border-spacing属性，直接控制所有行之间的垂直间距，不用修改元素布局，兼容性更好。

为什么之前的方案没生效？ #

• 没处理Angular的样式封装：组件内的样式默认只作用于自身内部元素，而Angular Material的表格元素属于第三方组件，需要用::ng-deep或者全局样式才能覆盖默认样式。
• 直接给mat-header-row加margin无效：table-row元素默认的display属性是table-row，这种情况下margin属性不会生效，必须修改display为flex/block，或者用伪元素、border-spacing这类替代方案。

你可以根据自己的需求选其中一种方案试试，调整数值就能得到你想要的间距效果啦！

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