亲爱滴朋友们，快来看看新鲜事儿吧在网上让表格的头固定住是不是很酷？
这个问题挺重要滴！咱们这项目得搭个可以上下滑动和锁定的头儿，说不定到时候还有分层头儿等着你喔~
搞掂了！一招简单的是把四张表拼成一张大表。然后，在每个列上都加一下 col 属性并弄个宽度值就行了。记住喔，得设成固定数哟～
这个事儿有点儿棘手，不过得再告诉你们一遍它真的挺关键滴！比如，我们已经搞定了表格里固定头部和滑动查看这两部分内容，但是你们天天都在用的筛选功能，现在还没完全弄好。这个任务要赶紧去做才有可能完成！
$(this.tableContent.nativeElement).on('scroll', (e) => {
$(this.fixedRowWrapper.nativeElement).prop('scrollTop', $(this.tableContent.nativeElement).prop('scrollTop'));
//方式一 ：设置头部固定列table 的滚动条，需要配合less 样式隐藏滚动条（如果不考虑ie9的兼容性，可以使用。less样式参考代码2）
// $(this.tableHeader.nativeElement).prop('scrollLeft', $(this.tableContent.nativeElement).prop('scrollLeft'))
// 方式二：设置头部固定列table 的margin-left 属性为负值，间接实现了头部固定的列同步向左滚动效果，兼容ie9
$(this.tableHeader.nativeElement).css({ marginLeft: `${-$(this.tableContent.nativeElement).prop('scrollLeft')}px` })
})
咱们聊聊怎么实现这个？首先，得看淡绿色的那张主表滚动不滚动，然后把下面深绿色那张头部分表以及红色区域里面的那个紫色区域的左边固定表都弄成能跟着一块儿翻滚。这样一来，整个表格翻滚起来就顺溜多了！
咱们说正经事啊：虽然搞定那个标题固定和滚动效果就行了，但是还有个技术活儿没解决呢——那就是代码咋整！放心，我这儿有俩小程序等着你，就在我GitHub主页上，全套都在那儿哟。
.ngx-table__header-inner {
// 隐藏滚动条，页面div 保持横向滚动，但是不支持ie9 ，为了兼容性所以没有使用，ts 中同步滚动
// 而是动态设置 ngx-table__header-inner 的margin-left 实现滚动效果
overflow: -moz-scrollbars-none;
overflow-x: auto;
-ms-overflow-style: none;
&::-webkit-scrollbar {
width: 0 !important;
display: none;
}
}
来，揭晓那个啥答案！用我们刚说的招数，咱们已经成功地把表格头部定住在Angular8里面！希望这个文章对你有所帮助~有疑问别客气，直接找我问！立马给你回信儿。还有，感谢各位一直以来对我们网站的支持！伙伴们！今儿咱就来聊聊怎么在网页滑动条上弄出个固定的头部。有干货，期待你们喜欢。觉得不错就点个赞分享！或是有啥想法，让我们一起讨论讨论！
评论0