Если я установлю для своей таблицы ширину: 100%, я получу пробелы между липкими столбцами. Как мне решить проблему? - PullRequest
Новая
       50

Если я установлю для своей таблицы ширину: 100%, я получу пробелы между липкими столбцами. Как мне решить проблему?

1 голос
/ 30 апреля 2020

есть ли у вас опыт в CSS и мат-таблицы в Angular? Я установил первые три столбца закрепленными в моей таблице, и ширина таблицы составляет 100%, но между закрепленными столбцами всегда есть большие пробелы. Я сижу на этой проблеме в течение нескольких дней и не могу найти решение. У тебя когда-нибудь была такая проблема? Ах да, все столбцы имеют индивидуальную ширину ...

Соответствующий код: 

// TABLE
table {
  border-collapse: seperator;
  width: 100%;
}

// CHANGED COLUMN WIDTH
th.mat-column-col1 {
  flex: 0 0 7% !important;
  min-width: 90px !important;
}

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

td.mat-column-col2 {
  text-align: left;
}

th.mat-column-col3 {
  flex: 0 0 6% !important;
  min-width: 90px !important;
}

th.mat-column-4, th.mat-column-5, th.mat-column-6, th.mat-column-7, th.mat-column-8, th.mat-column-9, th.mat-column-10, th.mat-column-11, th.mat-column-12, th.mat-column-13, th.mat-column-14, th.mat-column-15 {
  flex: 0 0 10% !important;
  min-width: 40px !important;
}

th.mat-column-16 {
  flex: 0 0 12% !important;
  min-width: 240px !important;
}

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

Мой код в Stackblitz: https://stackblitz.com/edit/angular-gfsjja?file=app%2Ftable-sticky-columns-example.css

1 Ответ

1 голос
/ 30 апреля 2020

Как указано в Angular документах :

Обратите внимание, что этот подход означает, что вы не можете включать некоторые функции родной таблицы, такие как colspan / rowspan или иметь столбцы, которые изменяйте размер в зависимости от их содержимого .

Как сообщалось также в этом выпуске , это своего рода ограничение таблицы на основе flexbox, поэтому обходной путь, как предлагается здесь , в вашем случае, дает фиксированные width и / или left вашим первым трем столбцам, примерно так: 

th.mat-column-col2,td.mat-column-col2 {
   left: 39px !important;
}
th.mat-column-col3,td.mat-column-col3 {
   left: 298px !important;
}
...