Ng-Zorro Table 固定列失效现象
ng-zorro ant design table 提供了强大的数据展示能力，其中包括通过 nzleft 和 nzright 属性实现列固定功能，这在处理宽表格时尤为有用。然而，开发者有时会遇到一个令人困惑的问题：即使在 nz-table 上设置了 [nzscroll]="{ x: '...', y: '...' }" 并且在
例如，以下是一个典型的 Ng-Zorro Table 配置，其中尝试固定前两列和最后一列：
Full Name Age Column 1 Action {{ data.name }} {{ data.age }} {{ data.address }} action
在这种配置下，如果固定列没有按预期工作，通常会让人首先怀疑 Angular 或 Ng-Zorro 的版本兼容性、组件导入问题，或者 nzScroll 属性配置不当。然而，在许多情况下，问题并非出在这些常见因素上。
问题根源：CSS样式冲突
经过深入排查，发现此类固定列失效问题的根本原因往往是一个特定的CSS规则冲突。Ng-Zorro Table 在内部使用一些隐藏的辅助元素来精确计算列宽和布局，尤其是在涉及固定列和滚动时。其中一个关键的辅助元素就是 .ant-table-measure-now。
如果项目中存在以下CSS规则：
.ant-table-measure-now {
display: none;
}这条规则会强制隐藏 Ng-Zorro Table 用于测量布局的内部元素。当这些测量元素被 display: none; 隐藏时，表格将无法正确获取列的尺寸信息，从而导致固定列的定位和渲染机制失效。尽管这个CSS规则可能是在其他场景下为了隐藏某些不必要的元素而添加的，但它对 Ng-Zorro Table 的内部工作机制产生了意想不到的破坏性影响。
解决方案
解决此问题的方法非常直接：移除或注释掉冲突的CSS规则。
检查你的全局CSS文件（如 styles.css 或 index.scss）、组件特定的CSS文件或任何可能引入外部样式的区域，查找 .ant-table-measure-now { display: none; } 这条规则。一旦找到，将其删除或注释掉即可。
示例：
如果你在项目中发现类似以下代码：
/* 可能存在于你的全局样式文件或某个组件样式文件中 */
.some-custom-class {
/* ... */
}
/* 错误示例：请务必移除或注释掉此规则 */
.ant-table-measure-now {
display: none; /* 移除或注释掉这一行 */
}
.another-style {
/* ... */
}将其修改为：
/* 正确做法：确保没有覆盖 Ng-Zorro 内部测量元素的 display 属性 */
/* .ant-table-measure-now {
display: none;
} */修改并保存CSS文件后，重新编译并运行你的Angular应用，Ng-Zorro Table 的固定列功能应该就能恢复正常。
注意事项与调试建议
- 全局CSS审查： 优先检查全局样式文件，因为它们最容易无意中影响到第三方UI库的内部元素。
- 浏览器开发者工具：
- 样式隔离： 在Angular项目中，推荐使用组件的样式隔离机制（如 encapsulation: ViewEncapsulation.Emulated，这是默认行为），以减少组件内部样式对全局的影响。但对于直接修改第三方库内部元素的全局CSS规则，样式隔离可能无法完全阻止其作用。因此，在使用全局样式时需要格外小心。
- 避免随意覆盖UI库内部样式： UI库（如 Ng-Zorro）通常有其内部的布局和渲染逻辑，这些逻辑依赖于特定的DOM结构和默认样式。随意覆盖这些内部样式，尤其是 display、visibility、position 等关键属性，很可能会导致意想不到的问题。在修改UI库样式时，应优先使用其提供的API或官方推荐的定制方法。
总结
Ng-Zorro Ant Design Table 固定列失效的问题，虽然表现为功能不工作，但其深层原因往往在于一个看似不相关的CSS规则 .ant-table-measure-now { display: none; } 干扰了库的内部测量机制。通过仔细审查并移除或注释掉这个冲突的CSS规则，可以迅速解决问题。这提醒我们在使用第三方UI库时，应警惕全局CSS样式可能带来的潜在冲突，并善用浏览器开发者工具进行调试，以精确识别和解决样式问题。
