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

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

效果如图:
xuehuayu.cn
xuehuayu.cn
xuehuayu.cn

实现条件

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

实现方式

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

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

2、实现固定效果

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

3、拖动时分隔效果

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