Material组件库中table组件的sticky属性

sticky 英文字面意思是粘，粘贴，所以姑且称之为粘性定位 。我们先看下在Angular中如何使用。

当我们需要固定住头部的时候，只需要在mat-header-row 加上 sticky: true，如下图：

效果图

但是在我们实际开发中，想要的效果远不止于此。除了固定整个头部外，随着数据的增多，我们表格的列可能也会增多，表格的底部也会出现滚动条。当我们向右拉滚动条的时候，需要固定第一列的数据，同样，我们在第一列的位置加上sticky的属性，如下图：

效果图

我们会发现，第一列虽然是固定住了，但没有明显的界限，很容易在视觉上混淆。此时，我们可以通过监测滚动条的位置，来添加阴影的样式，如下图：

效果图

注意：

在material table 组件中， border-collapse属性 默认是 separate ，我们在开发中可能用到其他的组件库，比如bootstrap，而bootstrap中table默认的是 collapse ，并且权重要比material table要高，就会影响到阴影的显示。** *注： border-collapse 属性设置表格的边框是否被合并为一个单一的边框，separate： 边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse ： 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。* 

演示图：