Angular Material Table 无法占满全宽，如何强制其占满全部可用宽度？

根因说明 #

你设置的width: 100%未生效，是因为Angular Material组件内置样式优先级高于你当前写的组件局部样式，同时部分版本的mat-table默认布局规则不是标准table布局，导致宽度属性不生效。

可落地解决方案 #

• 方案1：调整样式优先级覆盖内置规则
  你可以选择以下两种写法之一：
  1. 局部组件样式写法（适合只改当前页面表格）
     在你的组件CSS文件中写入：

  ::ng-deep .mat-table.mat-elevation-z8 {
    width: 100% !important;
    /* 列宽自动分配，内容过长会自动撑开列宽，表格整体占满宽度 */
    table-layout: auto;
    /* 如果需要固定列宽，防止内容过长撑乱布局，可以改成table-layout: fixed，再单独给每列设置宽度即可 */
  }
  

  2. 全局样式写法（适合所有页面的mat-table都统一占满宽度）
     把以下样式写到项目全局样式文件（通常是src/styles.scss或src/styles.css）中：

  table.mat-table {
    width: 100%;
    table-layout: auto;
  }
  

  全局样式优先级高于组件内置样式，不需要加!important即可生效。
• 方案2：修复父容器宽度
  检查表格的父级元素是否占满了可用宽度，如果父元素宽度没有100%，表格设置100%也只会继承父元素的宽度，给父容器添加width: 100%样式即可。
• 方案3：修正mat-table布局模式
  部分版本的Angular Material会把mat-table的display属性默认设为flex或block，导致宽度规则失效，在样式中补充display: table即可：

  table.mat-table {
    width: 100%;
    display: table;
    table-layout: auto;
  }
  

验证方法 #

修改后打开浏览器开发者工具，选中table元素，查看样式面板中的width属性，确认没有被划掉（被划掉说明优先级不够需要调整选择器权重），表格即可正常占满全部可用宽度。

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