mat-table как выровнять mat-header по ширине mat-cell - PullRequest
Новая
       41

mat-table как выровнять mat-header по ширине mat-cell

0 голосов
/ 22 апреля 2020

Я новичок в flex и хорошо справился со своим мат-столом. К сожалению, мой заголовок не соответствует ширине ячейки.

Вот изображение моего результата.

enter image description here

Как видите, мой заголовок не совпадает с моей ячейкой.

Вот мой CSS код, Как я уже говорил, я новичок, поэтому, может быть, я что-то упустил. 

@import "./../../styles.scss";


.mat-header-row {
    width: 100%;
  min-height: 20px;
  padding: 0px 0px 0px 4px;
}

.mat-row {
    width: 100%;
  min-height: 12px;
  display: inline-flex;
 // min-width: 100%;
}

.mat-header-cell {
  justify-content: left;
  font-size: smaller;
  font-weight: bold;
  padding: 0px 0px 0px 4px;
}

.mat-cell {
  justify-content: left;
  border-top: 1px solid crimson;
  font-size: smaller;
  padding: 0px 0px 0px 4px;
  text-align: left;
  align-items: flex-start;
}

.mat-cell-points {
  flex: 0 0 20px !important;
  white-space: unset !important;
}

.mat-cell-concession{
    flex: 0 0 200px !important;
    white-space: unset !important;
  justify-content: left;
  border-top: 1px solid crimson;
  font-size: smaller;
  padding: 0px 0px 0px 4px;
  text-align: left;
}

.rcorner1 {
  border-radius: 25px;
  background: mat-color($accent, 300);
  padding: 20px;
}

.example-container {
  display: flex;
  flex-direction: column;

  // min-width: 200px;
  max-width: 380px;
}


label {
  min-width: 15%;
}

.mat-row:nth-child(1n + 1) {
    background-color: mat-color($accent, lighter);
  }

  .mat-row:not(:nth-child(2n + 1)) {
    background-color: mat-color($primary, 300);
  }

.example-element-row:hover {
  background: mat-color($accent, 800);
}
.example-element-row:active {
  background: #efefef;
}

И мой HTML код:

Спасибо за вашу помощь

...