Css 如何使mat表自动调整大小以适应页眉

我有一个mat表格，我使用以下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;
}

我最后得到的是：

这里是代码

我想解决的问题是其中一个列标题（“Amount 9 column Name”）正在被包装。有足够的空间使其他柱子稍微窄一点。 有没有办法让单元格自动调整一点大小，这样标题就不会被包装？我还看到过一些其他帖子，它们使用如下方式手动设置其他列的列宽：

.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>

---

然后，列适合于内容，但我所做的将每个列的内容和标题居中的工作不再有效

我终于明白了。如果其他人想知道，您可以在此处看到答案：

基本上，我在html中使用table、th和td而不是mat table、mat header单元格和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>

并将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;
    } 

---

它可能会帮助您：）@woody有没有办法为列定义相同的大小，即使屏幕大小发生变化？

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;
}

@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;
    }