如何使席表自动调整大小以适应标头？

Question

我有一个垫子表，其中使用以下css对头和单元格进行中心对齐：

.center-align.mat-header-cell {
  display: flex !important;
  justify-content: center !important;
  padding-left: 18px !important;
}
.center-align.mat-footer-cell {
  display: flex !important;
  justify-content: center !important;
}
.center-align.mat-cell {
  display: flex !important;
  justify-content: center !important;
}
.left-align.mat-header-cell {
  padding-right: 18px !important;
}

我最后得到的是：我的桌子

以下是stackblitz中的代码

我想解决的问题是，其中一个列标题(“总量9列名”)正在被包装。还有足够的空间让其他的柱子更窄一点。有什么方法可以让单元格自动调整大小，这样就不会包装这个标题了吗？我看到了一些其他的帖子，它们手动设置其他列的列宽，使用如下内容：

.mat-column-position {
  flex: 0 0 100px;
}

但如果可以的话我想避免那样做。我不想要查看每一页上的每一个表，并调整多个列。谢谢。

更新：，我还没有解决这个问题，但是如果我将html更新为：

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource"  matSort>
      <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="left-align"> Name </th>
         <td mat-cell *matCellDef="let element" class="left-align"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="position">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Position </th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.position}} </td>
      </ng-container>
      <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount}} </td>
      </ng-container>
      <ng-container matColumnDef="amount2">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 2</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount2}} </td>
      </ng-container>
      <ng-container matColumnDef="amount3">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 3</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount3}} </td>
      </ng-container>
      <ng-container matColumnDef="amount4">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 4</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount4}} </td>
      </ng-container>
      <ng-container matColumnDef="amount5">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 5</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount5}} </td>
      </ng-container>
      <ng-container matColumnDef="amount6">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 6</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount6}} </td>
      </ng-container>
      <ng-container matColumnDef="amount7">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 7</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount7}} </td>
      </ng-container>
      <ng-container matColumnDef="amount8">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 8</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount8}} </td>
      </ng-container>
      <ng-container matColumnDef="amount9">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 9 Column Name</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount9}} </td>
      </ng-container>
      <ng-container matColumnDef="amount10">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-align"> Amount 10</th>
         <td mat-cell *matCellDef="let element" class="center-align"> {{element.amount10}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

和CSS：

table{
  width:100%;
}
.mat-header-row {
  background-color: #3F51B5;
  color: white;
  font-weight: bold;
}

.mat-header-cell {
  color: white;
  font-weight: bold;
  border-right: solid 0.5px white;
}
.mat-row:nth-child(odd) {
  background-color: white;
}

.mat-row:nth-child(even) {
  background-color: #D3D3D3;
}
.mat-cell{
  border-right: solid 0.5px black;
}
.center-align.th {
  display: flex !important;
  justify-content: center !important;
  padding-left: 18px !important;
}
.center-align.td {
  display: flex !important;
  justify-content: center !important;
}
.left-align.th {
  padding-right: 18px !important;
}

然后，这些列符合内容，但我为使每个列的内容和标题对齐所做的工作不再有效。

Answer 1

我终于弄明白了。如果其他人想知道的话，你可以在这里看到答案：stackblitz

基本上，我使用了table、th和td，而不是html中的mat-table、mat-header-cell和mat-cell元素：

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource"  matSort>
      <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="left-align-header" > Name </th>
         <td mat-cell *matCellDef="let element" class="left-align-cell"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="position">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Position </th>
         <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>
      <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount</th>
         <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
      </ng-container>
      <ng-container matColumnDef="amount2">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 2</th>
         <td mat-cell *matCellDef="let element"> {{element.amount2}} </td>
      </ng-container>
      <ng-container matColumnDef="amount3">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 3</th>
         <td mat-cell *matCellDef="let element"> {{element.amount3}} </td>
      </ng-container>
      <ng-container matColumnDef="amount4">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 4</th>
         <td mat-cell *matCellDef="let element"> {{element.amount4}} </td>
      </ng-container>
      <ng-container matColumnDef="amount5">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 5</th>
         <td mat-cell *matCellDef="let element"> {{element.amount5}} </td>
      </ng-container>
      <ng-container matColumnDef="amount6">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 6</th>
         <td mat-cell *matCellDef="let element"> {{element.amount6}} </td>
      </ng-container>
      <ng-container matColumnDef="amount7">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 7</th>
         <td mat-cell *matCellDef="let element"> {{element.amount7}} </td>
      </ng-container>
      <ng-container matColumnDef="amount8">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 8</th>
         <td mat-cell *matCellDef="let element"> {{element.amount8}} </td>
      </ng-container>
      <ng-container matColumnDef="amount9">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 9 Column Name</th>
         <td mat-cell *matCellDef="let element"> {{element.amount9}} </td>
      </ng-container>
      <ng-container matColumnDef="amount10">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount 10</th>
         <td mat-cell *matCellDef="let element"> {{element.amount10}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" ></tr>
   </table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>

设置表-概述-示例. set到

table{
  width:100%;
}
.mat-header-row {
  background-color: #3F51B5;
  color: white;
  font-weight: bold;
}

.mat-header-cell {
  color: white;
  font-weight: bold;
  border-right: solid 0.5px white;
}

.mat-row:nth-child(odd) {
  background-color: white;
}

.mat-row:nth-child(even) {
  background-color: #D3D3D3;
}
.mat-cell{
  border-right: solid 0.5px black;
}

并将styles.css设置为

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

    body { 
      font-family: Roboto, Arial, sans-serif;
      margin: 0;
    }

    .basic-container {
      padding: 30px;
    }

    .version-info {
      font-size: 8pt;
      float: right;
    }

    .mat-sort-header-container{
      justify-content: center !important;
       padding-left: 18px !important; /* Allow for sort icon*/
    } 

    .mat-cell{
       text-align: center;
     } 

     .left-align-cell.mat-cell{
       text-align: left;
     }

     .left-align-header>.mat-sort-header-container{
      justify-content: flex-start !important;
      padding-left:0px !important;
    }