完美tbody滚动效果

效果图：

源码：

<!DOCTYPE html>
<html><head><style>*{margin: 0;padding: 0;box-sizing: border-box;}.mytable{width: 800px;background-color: whitesmoke;/* 相邻边被合并 */border-collapse:collapse;border-spacing:0;margin:10px;}.mytable thead{background-color:gainsboro;}.mytable tbody {display: block;height: 400px;overflow-y: scroll;overflow-x: hidden;}.mytable thead,.mytable tbody tr,.mytable tfoot tr {display: table;width: 100%;table-layout: fixed;font-size: 16px;text-align: center;border-bottom: 1px solid gray;}.mytable thead {/* 预留滚动overflow-y的空间 */width: calc(100% - 1em);height: 30px;}.mytable td{border-left: 1px solid gray;}.mytable tfoot tr{border: none;}.mytable tfoot td{text-align: right;padding-right: 1em;border: none;}.mytable .index1{width: 50px;}.mytable .index2{width: 100px;}</style>
</head><body><div style="width: 100%;"><table class="mytable" ><thead><tr><td class="index1">序号</td><td class="index2">列1</td><td>列2</td><td>列3</td><td>列4</td></tr></thead><tbody><tr><td class="index1">1</td><td class="index2">列列列列列列列列列</td><td>列列列列列列列列列列列列列列列列列列</td><td>列列列</td><td>列列列列列列</td></tr><tr><td class="index1">1</td><td class="index2">列列列列列列列列列</td><td>列列列</td><td>列列列列列列</td><td>列列列列列列列列列列列列列列列列列列</td></tr><tr><td class="index1">1</td><td class="index2">列列列列列列列列列</td><td>列列列列列列</td><td>列列列</td><td>列列列列列列列列列列列列列列列列列列</td></tr><tr><td class="index1">1</td><td class="index2">列列列列列列列列列列列列列列列列列列</td><td>列列列列列列列列列</td><td>列列列</td><td>列列列列列列</td></tr><tr><td class="index1">1</td><td class="index2">列列列列列列列列列</td><td>列列列</td><td>列列列列列列</td><td>列列列列列列列列列列列列列列列列列列</td></tr><tr><td class="index1">1</td><td class="index2">列列列列列列列列列</td><td>列列列</td><td>列列列列列列</td><td>列列列列列列列列列列列列列列列列列列</td></tr><tr><td class="index1">1</td><td class="index2">列列列列列列列列列</td><td>列列列</td><td>列列列列列列</td><td>列列列列列列列列列列列列列列列列列列</td></tr><tr><td class="index1">1</td><td class="index2">列列列列列列列列列</td><td>列列列</td><td>列列列列列列</td><td>列列列列列列列列列列列列列列列列列列</td></tr><tr><td class="index1">1</td><td class="index2">列列列列列列列列列</td><td>列列列</td><td>列列列列列列</td><td>列列列列列列列列列列列列列列列列列列</td></tr></tbody><tfoot><tr><td colspan="4">共100条</td></tr></tfoot></table></div></body></html>

更多信息请查看博客或者关注公众号：Z技术

完美tbody滚动效果相关推荐

recycleview 清空数据滚动顶部_爱剪辑：制作数字滚动效果，翻滚吧字幕！
人来齐了8? 这次的效果依然吸睛哦! 用上爱剪辑的滚动类字幕特效,就能花式玩转数据- 用途当然是广泛der~ 倒计时.数据展示等一切关于数字的动画效果都适用~ 脑洞有多大,你的视频舞台就有多大 Par ...
jq实现页面滚动thead固定在顶部，仅tbody滚动
jq实现页面滚动thead固定在顶部,仅tbody滚动监听页面滚动 $(window).scroll(function () 获取窗口滚动高度 $(window).scrollTop() 总体思路: ...
scrolltop 原生js_解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法...
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动 ...
制作一个广告字幕滚动效果的网页的心路历程
先看效果刚开始的需求是,制作一个类似电视广告字幕的效果,我没什么思路,后来看了字幕的实现方式,就是用css动画的移动实现,于是我开始了对这段动画的驾驭. 技术:万能的vue.js html5 css ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
html怎么制作固定背景,使用CSS制作的页面背景固定和滚动效果
HTML HTML结构很简单,一个class为.cd-fixed-bg的div元素用于放置固定背景图,一个class为.cd-scrolling-bg的div元素用于滚动的部分.我们可以放置多个.cd ...
fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
html右侧浮动栏随着滚动,jQuery实现div浮动层跟随页面滚动效果
jQuery实现浮动层跟随页面滚动效果 #main{height:2000px} .demo{width:180px; height:250px; margin:10px; border:2px so ...
35个立体动感的视差滚动效果网站作品
这篇文章收集了35个具有立体动感效果的视差滚动网页设计作品分享给大家.视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今 ...
jQuery实现自动左右滚动效果的代码实例
2019独角兽企业重金招聘Python工程师标准>>> jQuery实现自动左右滚动效果的代码实例思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展 ...

完美tbody滚动效果

完美tbody滚动效果相关推荐

最新文章

热门文章