我们经常会遇到table表格列很多，或者列中内容较多时，可以实现左右拖动的同时，又可以固定第一列。如何实现呢？

，有啥问题欢迎留言一起讨论

效果如图：
xuehuayu.cn
xuehuayu.cn
xuehuayu.cn

实现条件

table的宽度必须大于父级元素的宽度，否则无法滚动

实现方式

1、使用新的css3属性 position:sticky

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

2、实现固定效果

  • 首先要设置table的父级节点overflow必不为 hidden，否则不会生效。因为hidden时无法滚动，所以固定效果也不会生效。
  • 给table需要固定的列加上 position:sticky, 同时根据需要 设置 left right top bottom 等值。

3、拖动时分隔效果

监听table父级元素的 scroll 事件，根据scrollLeft的值判断滚动距离，动态添加固定列的box-shadow阴影效果