如何让带sticky表头的Angular表格滚动时固定在指定偏移位置

失效原因 #

你将position: sticky配置在table元素上是错误的。不管是使用Angular官方的粘性表格特性，还是手动实现的粘性表头，本质都是给表头单元格/thead元素设置粘性定位，默认top值为0，修改table元素的定位属性不会生效。

解决方法 #

根据你的实现方式选择对应配置即可：

1. 使用Angular Material自带的sticky表头 #

直接覆盖自带的表头样式，优先级不够时可以加!important强制生效：

th.mat-header-cell {
  top: 30px !important;
}

2. 自定义实现的粘性表头 #

给thead下的th设置粘性定位，同时必须指定背景色避免内容穿透：

thead th {
  position: sticky;
  top: 30px;
  background: #ffffff; /* 和页面背景/表格背景保持一致 */
}

注意事项 #

• 所有父级元素不能设置overflow: hidden、overflow: auto，否则粘性定位会直接失效
• 如果页面顶部有固定导航栏，偏移值直接设置为导航栏的高度即可实现无缝贴合

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