Angular Material表格横向滚动后溢出行样式丢失问题求助

问题核心是Angular Material表格的表头行、数据行样式默认基于容器原始宽度渲染，滚动溢出部分无法继承背景色、边框等样式，可通过以下方式修复：

调整布局与样式 #

修改SCSS代码，确保表格行能跟随滚动宽度完整渲染：

.table-div {
  overflow-x: scroll;
  position: relative;

  mat-table {
    table-layout: fixed;
    width: fit-content;

    // 让行宽度适配所有单元格总宽度
    mat-header-row, mat-row {
      width: 100%;
      min-width: max-content;
    }

    mat-header-cell, mat-cell {
      overflow-wrap: normal;
      white-space: nowrap;
      overflow: hidden;
      padding-right: 30px; // 用padding替代margin避免布局偏移
      flex: 0 0 300px;
    }
  }
}

额外排查点 #

• 如果仍有样式截断，检查是否存在全局CSS或Material默认样式覆盖了行的宽度设置
• 可尝试给mat-header-row和mat-row添加display: table-row，强制表格行的标准布局行为

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