table表头固定方法

思路监听滚动然后利用css3的translateY属性位移表头即可

 <div id='table-cont' style="max-height: 150px;width: 540px;overflow: scroll;"><table><thead><tr align="center" style="background: #dcdcdc;"><th>头1</th><th>头1</th></tr></thead><tbody><tr><td>内容1</td><td>内容2</td></tr><tr><td>内容1</td><td>内容2</td></tr><tr><td>内容1</td><td>内容2</td></tr><tr><td>内容1</td><td>内容2</td></tr><tr><td>内容1</td><td>内容2</td></tr><tr><td>内容1</td><td>内容2</td></tr><tr><td>内容1</td><td>内容2</td></tr><tr><td>内容1</td><td>内容2</td></tr></tbody></table></div><script type="text/javascript">var tableCont = document.querySelector('#table-cont');function scrollHandle (event){var scrollTop = event.target.scrollTop;event.target.querySelector('thead').style.transform = 'translateY(' + scrollTop +'px)';}  tableCont.addEventListener('scroll',scrollHandle);</script>

table表头固定方法相关推荐

bootstrap Table表头固定
简介 bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/ 表头固定 ...
table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...
html table表头说明,HTML table表头固定
HTML table表头固定说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: table tbody { display: block; height: 200px; overflo ...
JQuery实现的Table表头固定展示效果
在线演示1 在线演示2 在线演示3 本地下载大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头 ...
一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
抽出时间整理笔记:table头部固定.超出宽度可横向移动,主信息隔行换色.鼠标移动变色.举例: code : <!DOCTYPE HTML> <head><meta ht ...
HTML table表头固定
实现表格表头的固定,采用纯css的方式具体如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="C ...
table表头固定，底部可滚动
需求:实现table表头固定,表体可滚动思路: tbody使用display:block,固定高度,并设置over-y:scroll, thead和tr,使用display:table,使用tabl ...
table 表头固定
一.table 表头固定说明.我们将表头和表内容分成两个表格就可以解决该问题. 二.代码. css代码:里面定死的宽高只是为啦方便看效果,实际中需要使用js计算出来. * {box-sizing: b ...
java 表头固定_BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: 栏目一栏目二栏目三栏目一栏目二栏目三星期一星期二星期三星期一星期二星期三星期一星期二星期二星期三星期一 ...

table表头固定方法

table表头固定方法相关推荐

最新文章

热门文章