角材粘性柱1柱以上 [英] Angular material Sticky column more than 1 column

问题描述

即时使用带有ver角的cli ver 7和最新版本的Angle材料

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

使用2粘糊糊是正确的方法吗?

it is the right way to use 2 sticky?

推荐答案

已解决，但笨拙. Angular 7材质表列需要百分比宽度定位才能正确对齐.无论如何，我最终给出了固定宽度的列，这些列来自.scss文件* *您的情况

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

请注意，必须精确定位左侧.加上HTML模板这两列中的粘性标签，它对我来说可以正常工作.

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.

这篇关于角材粘性柱1柱以上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！