javascript - 角容器尺寸

Question

在我的应用程序中，我有一个包含多个容器的表。一个容器（产品名称）需要比其他两个更大的空间，所以我想让它更长，我希望另一个更短。（类别和库存整合代码）。我正在使用angular material. 如何调整字段大小以使其看起来像我想要的那样？

HTML：

<ng-container matColumnDef="ProductCategory">
                    <th mat-header-cell *matHeaderCellDef> Category </th>
                    <td mat-cell *matCellDef="let row; let i = index">
                        <span *ngIf="EditIndex != i">{{row.ProductCategory?.CategoryName}}</span>
                        <mat-form-field *ngIf="EditIndex == i" class="w-100-p">
                            <mat-select required name="ProductCategory" [(ngModel)]="row.ProductCategory"
                                (selectionChange)="productCategoryChange(row, $event.value.ProductCategoryId, i)">
                                <mat-option *ngFor="let prm of productCategories" [value]="prm">
                                    {{prm.CategoryName}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </td>
                </ng-container>
                    <ng-container matColumnDef="Product">
                    <th mat-header-cell *matHeaderCellDef> Product Name</th>
                    <td *matCellDef="let row; let i = index">
                        <span *ngIf="EditIndex != i">{{row.Product?.ProductName}}</span>
                        <mat-form-field *ngIf="EditIndex == i" class="w-100-p">
                            <input type="text" required matInput name="Product" style="min-width: 400px !important;"
                                (input)="onSearchChange($event.target.value, row.ProductCategory?.ProductCategoryId)"
                                [value]="row.Product?.ProductName" [(ngModel)]="row.ProductId"
                                (ngModelChange)="updateWorkItemProductName($event, row)"
                                [matAutocomplete]="autoProduct">
                            <mat-autocomplete autoActiveFirstOption #autoProduct="matAutocomplete"
                                [displayWith]="displayProduct.bind(this)">
                                <mat-option *ngFor="let prm of products" [value]="prm.ProductId"
                                    style="font-size: smaller;">
                                    {{prm.ProductName}}
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>
                    </td>
                </ng-container>
                <ng-container matColumnDef="StockIntegrationCode">
                    <th mat-header-cell *matHeaderCellDef> Stock Integration Code </th>
                    <td *matCellDef="let row; let i = index">
                        <span *ngIf="EditIndex != i">{{row.Product?.StockIntegrationCode}}</span>
                        <mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p">
                            <input matInput name="StockIntegrationCode"
                                [(ngModel)]="row.Product.StockIntegrationCode"
                                (blur)="filterProductByStockIntegrationCode($event.target.value, row)">
                        </mat-form-field>
                    </td>
                </ng-container>

标签： javascripthtmlangulartypescriptangular-material