Angular Material mat-table表头未占满宽度与数据不对齐问题问询

• 异步数据加载时序问题
  表头渲染时数据源还未完全加载，mat-table计算列宽时仅参考表头内容长度，后续数据加载完成后数据列被内容撑开，但表头没有触发重排。这种情况在使用*ngFor动态生成列、或数据从接口异步拉取的场景下极易出现。可以通过给表格添加*ngIf="dataSource"，等数据源初始化完成后再渲染表格，验证是否是该问题导致。
• 全局样式冲突
  项目内自定义的全局样式覆盖了Angular Material的默认表格样式规则：比如给th元素设置了不合理的最大宽度、篡改了box-sizing属性，或是部分自定义的列样式仅作用于数据行、未同步作用于表头行。你在StackBlitz中无法复现，大概率是因为没有把项目的全局样式同步到演示环境，可以用浏览器开发者工具对比异常表格的表头和数据行的样式规则差异来排查。
• 列配置不匹配
  动态生成列的场景下，传给matHeaderRowDef的列名数组和matRowDef的列名数组存在数量、顺序不一致的问题，也会导致表头和数据列错位。
• 特殊功能配置异常
  如果表格开启了sticky固定表头/固定列、虚拟滚动功能，也可能出现列宽计算偏差：比如部分固定列没有显式指定宽度、虚拟滚动的viewport尺寸配置和实际表格容器不匹配。
• 父容器布局变动影响
  表格所在父容器使用flex布局、或者存在动态宽度变化（比如侧边栏折叠展开的动画），表格渲染完成后父容器宽度再次变更，但mat-table没有自动触发列宽重算。可以手动调用mat-table实例的updateStickyColumnStyles()方法强制重排验证。

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