Создание таблицы, содержащей столбцы фиксированной равной ширины, за исключением одного - PullRequest
0 голосов
/ 05 июня 2019

Извините за ужасный заголовок, не могу придумать лучшего описания.Я пытаюсь создать таблицу, которая содержит строки, состоящие из ячеек равной ширины, за исключением последних созданных.Эти строки должны содержать любое количество ячеек, которые могут содержать раскрывающееся меню (например, ng-select) или область ввода.

У меня есть две проблемы:

  1. В строках, которые не содержат входных данных, все ячейки имеют одинаковую ширину друг с другом, но если я выбрал параметр из ng-select, ширина соответствующей ячейки изменится.

  2. Встроки, которые содержат входные данные, заканчиваются тем, что занимают непропорциональное количество пространства.

Так что я спрашиваю, что мне нужно сделать, чтобы ng-select не изменилширина их ячеек и чтобы ячейки, содержащие поле ввода, не занимали больше места, чем должны?

     <td *ngFor="let parameter of parameters">
      <app-bm-text-input
        size="medium"
        id="input"
        *ngIf="parameter.inputType === 'text'"
        [formControlName]="parameter.name"
        type="text"
      ></app-bm-text-input>

      <ng-select
        [id]="'ng-select-' + parameter.name"
        class="select-input"
        *ngIf="parameter.inputType === 'select'"
        [items]="parameter.options || columns"
        bindLabel="name"
        [formControlName]="parameter.name"
        bindValue="name"
      >
      </ng-select>

      <ng-select
        id="distinction"
        class="select-input"
        [multiple]="true"
        *ngIf="parameter.inputType === 'multiSelect'"
        [items]="parameter.options || columns"
        bindLabel="name"
        [formControlName]="parameter.name"
        bindValue="name"
      >
      </ng-select>
    </td>

th {
  background-color: #e1e5ee;
  border-radius: 2px 2px 0 0;
  color: #292c42;
  height: 40px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  //flex-grow: 1;
}

td {
  border: 1px solid #e1e5ee;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  text-align: center;
  color: #9ba0b4;
  //flex-grow: 1;
}

td > * {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}

.add {
  width: 62px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...