Angular Material Table：如何指定列宽度

问题说明 #

使用<mat-table>组件时，默认列宽过宽导致页面出现横向滚动条，尝试通过.mat-column-COLUMNNAME类设置列宽无效，该方式仅在使用<table mat-table>结构时生效。

解决方案 #

方法1：用样式穿透突破组件样式隔离

Angular默认的组件样式隔离机制，会阻止组件内自定义样式作用于Material生成的.mat-column-*类。使用::ng-deep可以穿透隔离，让样式生效。修改你的CSS代码如下：

.table {
    width: 100%;
    margin: 50px;
}

::ng-deep .table .mat-column-id {
    width: 80px;
    border-right: 1px solid black;
}

::ng-deep .table .mat-column-name {
    flex: 1; /* 让Name列占据剩余可用宽度 */
}

::ng-deep .table .mat-column-status {
    width: 120px;
}

方法2：将样式放入全局样式文件

把列宽样式直接添加到项目根目录的styles.css（或styles.scss）中，全局样式不受组件隔离限制，无需额外穿透处理：

.table .mat-column-id {
    width: 80px;
    border-right: 1px solid black;
}

.table .mat-column-name {
    flex: 1;
}

.table .mat-column-status {
    width: 120px;
}

方法3：直接为表头和单元格设置内联样式

如果仅需临时调整单列表宽，可直接在<mat-header-cell>和<mat-cell>上设置style属性：

<ng-container matColumnDef="id">
  <mat-header-cell *matHeaderCellDef style="width: 80px;">Staff-id</mat-header-cell>
  <mat-cell *matCellDef="let staff" style="width: 80px;">{{staff.staff_id}}</mat-cell>
</ng-container>

注意事项 #

• 不要给<ng-container>设置宽度，它是逻辑容器，不会渲染为实际DOM元素，设置的样式无效。
• 优先选择方法1或2，保持样式的可维护性。

内容的提问来源于stack exchange，提问作者darshan k