Angular material Sticky column more than 1 column

问题

im curently using angular ver 7 with angular cli and also angular material the lastest version

im get to the point when using the angular table with sticky column position

<ng-container matColumnDef="name" sticky>
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

<ng-container matColumnDef="address" sticky>
      <th mat-header-cell *matHeaderCellDef> Address</th>
      <td mat-cell *matCellDef="let element"> {{element.address}} </td>
    </ng-container>

but when im serve it in the browser the sticky column all mess up, there is some space beetween them so when im scroll to the right, the animation seems so off

it is the right way to use 2 sticky?

回答1:

Solved but in a clumsy way. The Angular 7 material table columns require percentage width positioning to be correctly aligned. Anyways I ended up giving fixed width to columns which are sticky from .scss file *e.g. * in your case

.mat-col-name 
{
  left: 0px;
  width: 100px 
}
.mat-col-address 
{
  left: 100px;
  width: 100px;
}

Notice that left has to be positioned exactly. This along with sticky tag on these two columns in the HTML template made it work properly for me.

回答2:

Was having the same issue. The sticky columns are collapsing and there's weird spacing between columns caused by the sticky attribute. This means when you scroll across the table, there's an accordion effect on sticky column sizes and the content on the lower/non sticky scrolling column is showing up under the top/sticky columns.

Solution:

Set min-width and max-width on each sticky column to be the same value - I used px.

回答3:

Instead of just writing sticky, prefer writing [sticky]="true" at both positions, that should probably do. Rest the angular material will auto adjust.

Code Below:-

<ng-container matColumnDef="name" [sticky]="true">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<ng-container matColumnDef="address" [sticky]="true">
  <th mat-header-cell *matHeaderCellDef> Address</th>
  <td mat-cell *matCellDef="let element"> {{element.address}} </td>
</ng-container>

来源：https://stackoverflow.com/questions/54338378/angular-material-sticky-column-more-than-1-column

标签

angular7