用CSS怎么样做滚动表格的成效?
发布时间:2022-04-11 16:56:30 所属栏目:语言 来源:互联网
导读:这篇文章给大家分享的是用CSS怎么样做滚动表格的效果的示例。小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。 template section div class=box ul class=header li class=ce
这篇文章给大家分享的是用CSS怎么样做滚动表格的效果的示例。小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。 <template> <section> <div class="box"> <ul class="header"> <li class="cell">序号</li> <li class="cell">姓名</li> }, created() { this.arr = Array.from(new Array(20), (v, k) => { return k + 1 }) // 表格显示5行数据,此处复制开头的5条数据实现无缝 this.arr = this.arr.concat(this.arr.slice(0, 5)) } } </script> <style lang="scss"> $cellHeight: 30px; ul { list-style: none; margin: 0; padding: 0; } .box { width: 60%; margin: auto; } .header { display: flex; } .body { height: 5 * $cellHeight; overflow: hidden; // padding-bottom: 10px; li { display: flex; } </style> 总结 以上就是用CSS实现滚动表格的效果的介绍,上述示例具有一定的参考价值,有需要的朋友可以了解看看,希望对大家学习CSS的使用有帮助。 (编辑:PHP编程网 - 黄冈站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |