angular - 如何设置 mat-table 列宽的宽度

Question

我在整个应用程序中使用此代码。在某个地方，我们有 6 个其他地方，我们有 8 个基于条件的列可能会增加或减少，任何人都可以帮我解决如何修复列宽

 <table mat-table [dataSource]="dataSource" matSort class="mat-table">
           <ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(columnHeader)">
            <ng-container *ngIf="columnHeader[tableData] !== 'Select'">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnHeader[tableData]}}    </th>
           </ng-container>
           <ng-container *ngIf="columnHeader[tableData] == 'Select'">
            <th mat-header-cell *matHeaderCellDef mat-sort-header><mat-checkbox (change)="getAllRecordSelected($event)"></mat-checkbox></th>
           </ng-container>

           <ng-container *ngIf="columnHeader[tableData] !== 'Select' && columnHeader[tableData] !== 'Action'">
              <td mat-cell  *matCellDef="let element">
                <ul>
                  <li *ngFor="let data of element[tableData]">
                    <div class="datacontent"> <span ngbTooltip="{{data}}" placement="top"> {{ (data?.length > 40)?(data | slice:0:40)+'...':(data)}}</span> </div>
                  </li>
                </ul>
              </td>
           </ng-container>
           <ng-container *ngIf="columnHeader[tableData] == 'Select'">
              <td mat-cell *matCellDef="let element">
                 <mat-checkbox [checked]="element.checked" (change)="getRecord($event, element)"></mat-checkbox>
              </td>
           </ng-container>
           <ng-container *ngIf="columnHeader[tableData] == 'Action'">
            <td mat-cell *matCellDef="let element">
              <button name="cancel" mat-raised-button color="primary" (click)="cancelButton($event, element)" class="btn btn-default">Cancel</button>&nbsp;&nbsp;<button mat-raised-button color="primary" name="resend" (click)="resendButton($event, element)" class="btn btn-default">Resend</button>
         </ng-container>
           </ng-container>
           <tr mat-header-row *matHeaderRowDef="objectKeys(columnHeader); sticky: true"></tr>
           <tr mat-row *matRowDef="let row; columns: objectKeys(columnHeader);" (click)="getRecordClicked(row)"></tr>
        </table>

Answer 1

您可以按如下方式定义属性绑定：style.width

<th mat-header-cell *matHeaderCellDef mat-sort-header [style.width]="'200px'">{{columnHeader[tableData]}}</th>

要摆脱水平滚动条，您还应该在 CSS 中定义以下内容。

table {
  width: 100%;
}

请看下面的StackBlitz。