Mat-Table 中的 Mat-Card 不占用整个宽度并溢出：x答案

【问题标题】：Mat-Card in Mat-Table does not take up full width with overflow: xMat-Table 中的 Mat-Card 不占用整个宽度并溢出：x
【发布时间】：2020-05-25 13:04:16
【问题描述】：

我在 mat-table 中插入了一张 mat-card 并将宽度设置为 width: 100%。但是当我滚动溢出时：x 从左到右不是整个包装都充满了垫卡。你知道我必须在 CSS 中优化什么吗？

我的代码：

// HTML
<div class="app-table-wrapper">
  <table mat-table [dataSource]="dataSource" id="app-table">...</table>
    <mat-card class="change-width"></mat-card>
</div>

// CSS
.app-table-wrapper {
  position: relative;
  background-color: #fbf9f9;
  min-width: 200px;
  overflow: auto;
  padding: 0;
  height: 300px;
}

.change-width {
  width: 100%;
}

我的工作：https://stackblitz.com/edit/angular-sticky-table-a818pn?file=src%2Fapp%2Ftable%2Ftable.component.html

【问题讨论】：

我自己解决了这个问题。通过将 mat-card 设置为 position: sticky and left: 0 !important。

标签： css angular angular-material mat-table

【解决方案1】：

我认为可以有另一种方式。您可以等到表格加载完毕，然后渲染您的垫卡，以便它可以根据表格的宽度获得整个宽度。

为此，您可以使用该变量将其与 mat-card 标记中的 *ngIf 绑定。

【讨论】：

【解决方案2】：

我遇到了一个相关的问题，即我的表格无法填满整个对话框。就我而言，我可以通过将以下内容放入我的 SCSS 文件中来完成这项工作：

mat-table
{
    width: 100% !important;
}

以及我的模板中的以下内容：

<mat-table [dataSource]="alertCounts">
...
</mat-table>

【讨论】：