If I set my table to width: 100%, I get blanks between the sticky columns. How do I solve the problem?

1
votes

do you have experience in CSS and mat-table in Angular? I have set the first three columns sticky in my table and the table has width: 100%, but there are always big blanks between the sticky columns. I've been sitting at this problem for days and can't find a solution. Have you ever had a problem like this? Ah yes, the columns all have an individual width...

Relevant Code:

// 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;
}

My Code in Stackblitz: https://stackblitz.com/edit/angular-gfsjja?file=app%2Ftable-sticky-columns-example.css

1
cssangularangular-materialmat-table
I think the problem is the left attribute of second and third columns, they use a smaller value than needed (that should be the width of previous columns, eg left: 39px and left: 298px;). I'm a beginner with angular so I don't know how to help you any further :) - WoAiNii

1 Answers

1
votes

As stated in Angular docs:

Note that this approach means you cannot include certain native-table features such colspan/rowspan or have columns that resize themselves based on their content.

As reported also in this issue this is a sort of flexbox-based table limit, so a workaround, as suggested here, in your case, is giving fixed width and/or left, to your first three columns, something like this:

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