CSS вопрос в области Mat-Table

Question

Я использовал CSS, чтобы настроить ширину столбцов. Теперь у меня проблема в том, что мои столбцы превышают определенную таблицу соответствия. У вас есть идея, как ее решить?

<div class="content-wrapper mat-elevation-z8">
    <!-- Data Table -->
    <div class="table-wrapper">
      <mat-table [dataSource]="dataSource" [class.isMobile]="isMobile">
        ...
      </mat-table>
</div>
  </div>

.table-wrapper {
  position: relative;
  width: 100% !important;
  min-height: 100% !important;
  overflow: auto;
}

.mat-row#mat-row-mobile {
  min-height: 30px;
}

.mat-column-1, .mat-column-2, .mat-column-3, .mat-column-4, .mat-column-5, .mat-column-6, .mat-column-7, .mat-column-8, .mat-column-9, .mat-column-10, .mat-column-11, .mat-column-12 {
  flex: 0 0 10% !important;
  min-width: 110px !important;
}

.mat-column-note {
  flex: 0 0 12% !important;
  min-width: 170px !important;
}

.mat-column-assignment {
  flex: 0 0 17% !important;
  min-width: 230px !important;
}

Answer 1

Я считаю, что проблема в расчетах. Например,

.mat-column-1, .mat-column-2, .mat-column-3, ... , .mat-column-12 {
   flex: 0 0 10% !important; // this equals to 120% 
   min-width: 110px !important; // this equals to 1320px. Be carefull. Please ask yourself "What happens if my screen is narrower?" Then width in fixed units is a problem
}

Некоторые читают о CSS ДЛИНЫ. css длины

Вы можете попробовать ограничить

.mat-column-kag {
  flex: 0 0 auto !important;
  max-width: 90px !important;
  box-sizing: border-box;
}
.mat-column-name{
  flex: 0 0 auto !important;
  max-width: 200px !important;
  box-sizing: border-box;
}
.mat-column-accountNumber
.mat-column-1,
.mat-column-2,
.mat-column-3,
.mat-column-4,
.mat-column-5,
.mat-column-6,
.mat-column-7,
.mat-column-8,
.mat-column-9,
.mat-column-10,
.mat-column-11,
.mat-column-12,
{
     flex: 0 0 calc((100% - 290px) / 13) !important;
     box-sizing: border-box;
 }

Примечание: Также я добавил размер рамки для всех ваших пользовательских столбцов ширины, потому что длина отступа учитывается если это свойство не установлено, это добавляет дополнительную длину.

Подробнее о размерах ящика здесь Размер ящика: border-box