如何使用粘性第一列制作角度材料表

时间:2018-05-09 20:00:00

标签: css angular angular-material-5

有没有办法使用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;
}

5 个答案:

答案 0 :(得分:0)

有了角形材料版本6,这变得很容易。

您可以在需要在表格左侧粘贴的列上添加sticky标记,并在表格右侧添加stickyEnd标记。

这是一个https://plnkr.co/edit/Lc6HNFzT0hBtVwp0EghG?p=preview

答案 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-h​​eader-cell:first-child {

位置:粘性;

位置:-webkit-sticky;

右:0;

z-index:1;

背景:继承;

border-left:1px 纯灰色;

}`