js、css 实现table表头固定

1. js实现（个人项目用过，完全js实现）

html:

<div class='table-cont' id='table-cont'><!--看这里--> <table class="table table-striped"><thead><tr><th>11</th><th>22</th></tr></thead><tbody><tr><td>33</td><td>44</td></tr><tr><td>55</td><td>66</td></tr></tbody></table></div>

css:

/* table-cont为table外层div的class*/.table-cont{/**make table can scroll**/max-height: 200px;overflow: auto;/** add some style**//*padding: 2px;*/background: #ddd;margin: 20px 10px;box-shadow: 0 0 1px 3px #ddd;
}
thead{background-color: #ddd;
}

js:

// 固定表头
'use strict'window.onload = function(){var tableCont = document.querySelector('#table-cont')function scrollHandle (e){console.log(this)var scrollTop = this.scrollTop;this.querySelector('thead').style.transform = 'translateY(' + scrollTop +'px)';}  tableCont.addEventListener('scroll',scrollHandle)
}

方法二：纯css样式实现（简单的table，没有复杂多级嵌套的table可以用这个方法。。。）

html:

 <table align="center"><thead><tr> <th>序号</th><th>内容</th> </tr></thead><tbody><tr> <td>1</td><td>我只是用来测试的</td> </tr><tr> <td>2</td><td>我只是用来测试的</td> </tr><tr> <td>3</td><td>我只是用来测试的</td> </tr></tbody>
</table>

css:

    <style>table tbody {display: block;height: 200px;overflow-y: scroll;}table thead tr,table tbody tr {display: table;width: 100%;table-layout: fixed;text-align: center;}thead th,tbody td {width: 50px;}table thead {width: calc( 100% - 1em);}</style>

效果图：

参考：https://www.jianshu.com/p/27315ff5f52d

js、css 实现table表头固定相关推荐

table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...
纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
html table表头说明,HTML table表头固定
HTML table表头固定说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: table tbody { display: block; height: 200px; overflo ...
JQuery实现的Table表头固定展示效果
在线演示1 在线演示2 在线演示3 本地下载大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头 ...
table 表头固定
一.table 表头固定说明.我们将表头和表内容分成两个表格就可以解决该问题. 二.代码. css代码:里面定死的宽高只是为啦方便看效果,实际中需要使用js计算出来. * {box-sizing: b ...
HTML table表头固定
实现表格表头的固定,采用纯css的方式具体如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="C ...
html5手机表头设置,html Table 表头固定的实现
本文介绍了html table 表头固定的实现,分享给大家,具体如下: 合同号签约客户发布客户合同状态选定条件的发布周期额度看看css *{ padding:0; margin:0; } th{ b ...
一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
抽出时间整理笔记:table头部固定.超出宽度可横向移动,主信息隔行换色.鼠标移动变色.举例: code : <!DOCTYPE HTML> <head><meta ht ...
table表头固定，底部可滚动
需求:实现table表头固定,表体可滚动思路: tbody使用display:block,固定高度,并设置over-y:scroll, thead和tr,使用display:table,使用tabl ...

js、css 实现table表头固定

js、css 实现table表头固定相关推荐

最新文章

热门文章