Как я могу получить таблицу размеров для автоматического изменения размера в соответствии с заголовками - PullRequest
Новая
       53

Как я могу получить таблицу размеров для автоматического изменения размера в соответствии с заголовками

0 голосов
/ 01 марта 2019

У меня есть таблица матов, где я выровнял по центру заголовки и ячейки, используя следующую 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;
}

тогда столбцы соответствуют содержимому, но то, что я сделал для центрирования содержимого и заголовков каждого столбца, больше не работает.

1 Ответ

0 голосов
/ 04 марта 2019

Я понял это в конце концов.Если кто-то еще захочет узнать, вы можете увидеть ответ здесь: stackblitz

В основном я использовал table, th и td вместо mat-table, mat-header-cell иэлементы mat-cell в 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-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>

установите для table-Overview-example.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;
}

и установите 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;
    }
...