Блог

Главная - Вопросы по программированию - как поддерживать тот же размер столбца при уменьшении размера экрана в таблице угловых материалов

как поддерживать тот же размер столбца при уменьшении размера экрана в таблице угловых материалов

#angular #angular-material #material-ui

#angular #angular-материал #материал-пользовательский интерфейс

Вопрос:

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

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

Можем ли мы в любом случае поддерживать тот же размер столбца для «общей суммы расчетов», даже если размер экрана уменьшается?

Ниже приведен мой stackblitz

https://stackblitz.com/edit/angular-bklajw-5foa62?file=app/table-basic-example.ts

Изображение обновлено

Ответ №1:

Спасибо за разъяснение вашей проблемы по моему запросу. для такого поведения я бы посоветовал вам использовать min-widht и max-widht сделать так, чтобы ваша table ячейка выглядела одинаково на каждом экране, пожалуйста, используйте приведенный ниже CSS в вашем стекблите

 th.mat-header-cell,
td.mat-cell {
  text-align: center;
  border: 1px solid #ccc;
  padding: 0 !important;
  min-width: 100px;
  max-width: 100px;
}

Кроме того, если вы хотите, чтобы первая ячейка выглядела меньше, так как это серийные номера, поэтому измените ее min-width и max-width , используя first-child 

 th.mat-header-cell:first-child,
td.mat-cell:first-child{
  min-width: 50px;
  max-width: 50px;
}

Чтобы изменить только «общую сумму расчетов«, как вы упомянули в своем вопросе, затем используйте некоторый КЛАСС для этих ячеек ( th td ) и оформите его, как указано выше

  .similar-cell-width{
    min-width: 100px;
    max-width: 100px;
    width: 100px; /*solution as per your req it fix the table cell widht*/

 }

Комментарии:

1. Большое спасибо, я внес изменения, но все же в некоторых случаях заголовки отображаются по-другому. Пожалуйста, проверьте обновленный stackblitz

2. @app Попробуйте использовать width:100px это, чтобы решить вашу проблему

3. @app .similar-cell-width{ width: 100px; } в css, также обновил мои ответы

4. Я добавил массив newData. и обновлено в stackblitz stackblitz.com/edit/angular-bklajw-5foa62

5. @app Рад слышать, что ваша проблема решена, пожалуйста, примите ответ, чтобы помочь другим, я изучаю newData Array проблему, я не уверен, смогу ли я помочь в этом, поскольку я тоже новичок в Angular Material; p

Ответ №2:

Material добавляет классы css к каждому td на основе вашего массива displayedColumns, чтобы вы могли настроить таргетинг на каждый класс с помощью css.

  displayedColumns: string[] = ['name'];

<td class="mat-cell cdk-cell cdk-column-name mat-column-name" > Name </td>

CSS

  .mat-column-name {max-width: 120px; min-width: 120px;}