如何固定table表格的列
0 条评论我们经常会遇到table表格列很多，或者列中内容较多时，可以实现左右拖动的同时，又可以固定第一列。如何实现呢？
，有啥问题欢迎留言一起讨论
效果如图：
实现条件
table的宽度必须大于父级元素的宽度，否则无法滚动
实现方式
1、使用新的css3属性 position:sticky
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
2、实现固定效果
- 首先要设置
table的父级节点overflow必不为hidden，否则不会生效。因为hidden时无法滚动，所以固定效果也不会生效。 - 给table需要固定的列加上
position:sticky, 同时根据需要 设置leftrighttopbottom等值。
3、拖动时分隔效果
监听table父级元素的 scroll 事件，根据scrollLeft的值判断滚动距离，动态添加固定列的box-shadow阴影效果
- 本文链接：https://xuehuayu.cn/article/d2c6416d.html
- 版权声明：① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 部分文章内容由 AI 生成，内容仅供参考，请仔细甄别。③ 标为转载的文章来自网络，已标明出处，侵删。
