Angular mat-table列过于紧凑，CSS改列宽、自定义ngClass无效如何解决？

失效原因 #

你之前的修改没有生效主要有两个核心原因：

• Angular Material的mat-table默认启用table-layout: auto，浏览器会自动根据单元格内容计算列宽，你手动设置的固定宽度不会生效
• Angular 默认的视图封装机制会给组件内的样式加上唯一属性前缀，导致你写的样式无法作用到mat-table内部渲染的单元格元素上，样式被隔离

修复方案 #

不需要修改你现有的HTML模板代码，按照以下方式调整样式即可生效：

1. 直接在组件对应的样式文件中添加如下CSS：

/* 用:host包裹避免::ng-deep污染全局样式 */
:host ::ng-deep .order-table {
  table-layout: fixed;
  width: 100%;
}

/* 统一设置单元格内边距，增加列间距 */
:host ::ng-deep .order-table th.mat-header-cell,
:host ::ng-deep .order-table td.mat-cell {
  padding: 12px 16px;
  border-right: 1px solid #e0e0e0; /* 增加列分隔线，强化列区分度 */
}
/* 最后一列移除右侧边框 */
:host ::ng-deep .order-table th.mat-header-cell:last-child,
:host ::ng-deep .order-table td.mat-cell:last-child {
  border-right: none;
}

/* 按列名单独设置宽度 */
:host ::ng-deep .order-table th[matColumnDef="DeliveryNumber"],
:host ::ng-deep .order-table td[matColumnDef="DeliveryNumber"] {
  width: 75px;
}

:host ::ng-deep .order-table th[matColumnDef="StockIntegrationCode"],
:host ::ng-deep .order-table td[matColumnDef="StockIntegrationCode"] {
  width: 75px;
}

:host ::ng-deep .order-table th[matColumnDef="ProductName"],
:host ::ng-deep .order-table td[matColumnDef="ProductName"] {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 内容过长时显示省略号，避免打乱布局 */
}

:host ::ng-deep .order-table th[matColumnDef="QuantityIn"],
:host ::ng-deep .order-table td[matColumnDef="QuantityIn"] {
  width: 80px;
  text-align: right;
}

:host ::ng-deep .order-table th[matColumnDef="UnitTypeId"],
:host ::ng-deep .order-table td[matColumnDef="UnitTypeId"] {
  width: 80px;
}

2. 如果你不想使用::ng-deep语法，可以直接把上述样式去掉:host ::ng-deep前缀后，放到项目全局的styles.css/styles.scss文件中，同样可以生效。

可选优化 #

如果列内容允许换行，可以移除white-space: nowrap、overflow: hidden、text-overflow: ellipsis这三行配置，内容会自动撑开行高，不会被截断。

内容的提问来源于stack exchange，提问作者Hectic Platypus