Angular表格粘性列在Chrome正常但Firefox失效的问题如何解决？

根因说明 #

Firefox 对 table 元素内的 position: sticky 属性支持规则和 Chrome 存在差异：

• Firefox 要求设置了 sticky 的表格单元格，所属的 table 必须开启 table-layout: fixed 固定布局
• 默认生成的 sticky 样式缺少显式的定位偏移值和层级配置，Firefox 不会主动识别Angular Material绑定的sticky属性生成对应偏移
• 表格父级的溢出配置也会直接影响粘性效果生效

修复步骤 #

1. 添加兼容样式 #

在组件样式文件中加入以下CSS规则：

/* 外层滚动容器配置 */
.example-container {
  overflow: auto;
  max-width: 100%;
}

/* 表格固定布局配置，是Firefox粘性列生效的必要条件 */
table[mat-table] {
  table-layout: fixed;
  width: max-content;
}

/* 左侧粘性列兼容配置 */
th[mat-header-cell][sticky],
td[mat-cell][sticky] {
  position: sticky !important;
  left: 0 !important;
  z-index: 1 !important;
  background: inherit !important; /* 避免滚动时下层内容穿透显示 */
}

/* 若有右侧粘性列，添加以下配置 */
th[mat-header-cell][stickyEnd],
td[mat-cell][stickyEnd] {
  position: sticky !important;
  right: 0 !important;
  z-index: 1 !important;
  background: inherit !important;
}

2. 为每一列显式指定宽度 #

由于启用了table-layout: fixed，需要为所有列指定固定宽度，避免列宽错乱：

/* 示例：按列名设置对应宽度 */
.cdk-column-name {
  width: 180px;
}

.cdk-column-position {
  width: 100px;
}

/* 其余列按业务需求补充宽度配置即可 */

3. 排查父元素溢出属性 #

检查表格所有外层父元素，不要设置overflow: hidden，该属性会导致Firefox下sticky效果完全失效。

完成以上配置后即可在Firefox浏览器中正常使用粘性列功能，表现和Chrome一致。

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