有没有办法使用CSS使用粘性第一列制作Angular材质?
已准备好编辑Stackblitz code
我尝试调整此解决方案https://jsfiddle.net/zinoui/BmLpV/但由于某些原因,第一列被抛出表格本身并且它失去了样式。
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>..........
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
.......
<tr>
</tbody>
</table>
</div>
</div>
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
答案 0 :(得分:0)
有了角形材料版本6,这变得很容易。
您可以在需要在表格左侧粘贴的列上添加sticky
标记,并在表格右侧添加stickyEnd
标记。
答案 1 :(得分:0)
我已经使用stickyEnd来实现此目标,如下所示。
<ng-container matColumnDef="12" class="white-bg" stickyEnd>
</ng-container>
答案 2 :(得分:0)
td:first-child, th:first-child {
position:sticky;
left:0;
z-index:1;
background-color:grey;
}
答案 3 :(得分:0)
.mat-table-sticky:first-child {
border-right: 1px solid #e0e0e0;
}
<ng-container
matColumnDef="name"
sticky
>
</ng-container>
`
.mat-table-sticky:first-child {
border-right: 1px solid #e0e0e0;
}
`
答案 4 :(得分:-1)
它对我有用;
` :host ::ng-deep .mat-cell:first-child, .mat-header-cell:first-child {
位置:粘性;
位置:-webkit-sticky;
右:0;
z-index:1;
背景:继承;
border-left:1px 纯灰色;
}`