html - 角材料表边框不是全长

Question

我试图创建一个漂亮的桌子。由于矩阵部分即将包含内容，我无法将其缩小到移动设备。所以我添加了溢出：自动以获得滚动条。

问题是水平线不会延伸到整个表格，它会在滚动后面的部分切断。

滚动前

滚动后

HTML

  <ng-container matColumnDef="module">
    <mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Module</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'"> {{moduleData.module}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="specialisation">
    <mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Spec</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'">
      <mat-list dense>
        <mat-list-item *ngFor="let specialisation of moduleData.specialisation"> {{specialisation}}</mat-list-item>
      </mat-list>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="period">
    <mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Periode</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'"> {{moduleData.period}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="matrix">
    <mat-header-cell *matHeaderCellDef [ngClass]="'matrixCell'"> Matrix</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'matrixCell'"> {{moduleData.matrix}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="endRequirements">
    <mat-header-cell *matHeaderCellDef [ngClass]="'requirmentCell'"> Eindeisen</mat-header-cell>
    <mat-cell *matCellDef="let moduleData" [ngClass]="'requirmentCell'">
      <mat-list>
        <mat-list-item *ngFor="let requirement of moduleData.endRequirements"> {{requirement}}</mat-list-item>
      </mat-list>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let moduleRowData; columns: displayedColumns;"></mat-row>
</mat-table>

CSS

.table-container{
  height: calc(100vh - 114px);
  overflow: auto;
}

.requirmentCell{
  flex: 0 0 325px;
}

.matrixCell{
  flex: 0 0 550px;

}

.smallCell{
  flex: 0 0 110px;

}

编辑 进一步修补，它不仅仅是在那里被切断的边界。它的任何css，背景颜色和标题。

标签： htmlcssangular