如何制作带有粘性第一列的角度材质表

Question

有没有办法使用 CSS 制作具有粘性第一列的 Angular Material？

这里准备编辑Stackblitz代码

我尝试调整此解决方案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;
}

Answer 1

有了角度材料版本 6，这一切就变得简单了。

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

这是一个Stackblitz 示例