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上定义property binding，如下所示：

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

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

table {
  width: 100%;
}

请查看以下StackBlitz。

如何设置垫台宽度

1 个答案: