如何不固定mat-table宽度实现列溢出时自动显示横向滚动条

你只需要修改现有CSS规则即可，不需要给mat-table设置固定宽度，修改后的完整代码如下：

.table-container {
  width: 100%;
  overflow-x: auto;
}

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

/* 可选配置：强制单元格内容不换行，避免内容折行压缩列宽 */
.mat-header-cell, .mat-cell {
  white-space: nowrap;
  padding: 0 24px;
}

规则说明 #

• 原配置里mat-table { width: 100%; }会强制表格宽度和外层容器保持一致，就算列总宽度超过容器也会自动压缩列宽，最终导致列重叠。
• 改成width: auto后，表格宽度会由所有列的实际总宽度自动计算，总宽度超出外层容器时就会自动触发横向滚动条。
• min-width: 100%是为了兼容列数较少的场景，保证表格在内容不足一屏时也能占满容器宽度，不会出现宽度收缩的问题。
• 如果你需要给特定列设置固定宽度，直接给对应列的单元格加宽度规则即可，不会影响整体滚动效果，示例：

/* 示例：给id列、描述列设置固定宽度 */
.mat-column-id {
  width: 80px;
}
.mat-column-description {
  width: 400px;
}

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