Angular Material横向滚动数据表边框显示异常问题求助

我刚帮你分析了这个问题，根源在于当表格放在横向滚动容器中时，Angular Material默认的表格行（mat-row、mat-header-row）宽度没有匹配表格的实际内容总宽度，导致边框只显示在当前可视区域内，滚动后就断了。

这里给你几个具体的解决步骤：

• 第一步：确保滚动容器样式正确
  先确认你的表格外层容器已经设置了横向滚动：

  .table-container {
    overflow-x: auto;
  }
  

• 第二步：强制表格行匹配内容宽度
  给表格的表头行和数据行添加样式，让它们的宽度跟随表格所有列的总宽度，同时保证在列数较少时能占满容器：

  .mat-table mat-header-row,
  .mat-table mat-row {
    width: fit-content;
    min-width: 100%;
  }
  

  把这段代码加到你的组件样式文件中（比如table-basic-example.component.css），覆盖默认的行样式。

• 额外说明（如果使用粘性列）
  如果你后续用到了sticky列，可能需要给粘性列的单元格单独调整边框样式，但你的示例里没有这个场景，先按上面的方法解决基础问题即可。

这样设置后，当你横向滚动表格时，行的边框就会铺满整个表格的实际宽度，不会再出现截断的情况啦！

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