如果将表格的宽度设置为100％，则在粘滞的列之间会出现空白。我该如何解决这个问题？

Question

您是否有使用Angular的CSS和mat-table的经验？我在表中设置了前三列为粘性列，并且该表的宽度为：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

Answer 1

如Angular docs中所述：

注意，这种方法意味着您不能包含某些本机表功能，例如colspan / rowspan或具有根据其内容调整自身大小的列。

也如issue中所报告，这是一种基于Flexbox的表限制，因此，根据您的情况，建议的here解决方案是为您的计算机提供固定的width和/或left前三列，如下所示：

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