表格固定表头，tbody加滚动条

实现表头固定，tbody加上滚动条。有一种解决方法将分为两个表格来做：一部分是thead，一部分是tbody，放thead的表格绝对定位在父元素，放tbody的表格加上滚动条。当需调横向滚动条时，需要表头和tbody一起滚动，这种方法带来很多不便，必须固定td的宽度，让thead的td和tbody的td宽度相同。所以尝试着用js实现。

function scrollHandle (e){var scrollTop = this.scrollTop;$(e.target).find('thead').css({'transform':'translateY('+scrollTop + 'px)','-ms-transform':'translateY('+scrollTop + 'px)',  /* IE 9 */'-moz-transform':'translateY('+scrollTop + 'px)', /* Firefox */'-webkit-transform':'translateY('+scrollTop + 'px)', /* Safari 和 Chrome */'-o-transform':'translateY('+scrollTop + 'px)' })}
var tableCont = document.querySelector('.tableData')
tableCont.addEventListener('scroll',scrollHandle,false)

但该方法不兼容IE

表格固定表头，tbody加滚动条相关推荐

HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
element table滚动条占宽度_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
html 滚动条_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
iframe 滚动条不显示_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列情景一:vue+element 只要在el-ta ...
如何实现表格固定表头和某列
如何实现表格固定表头和某列在开发过程中,如果数据比较多并且需要对比查看的情况下,一般是是需要固定表头和开始的某几列.可以通过一些组件进行实现.但是引用组件需要引入大量的js文件或者不满足某一方面的需 ...
php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
Angular8简单方式实现表格固定表头和冻结列
Angular8简单方式实现表格固定表头和冻结列 html页面: <style> .tableheader {position: relative; top: 0px; z-index: ...
【css】纯css实现table表格固定表头，表内容滚动
今天在写公司项目的时候,遇到了一个比较xx的问题,现公司的项目使用的是 vue2.0 和 element-ui 搭建的. 那么提到 element-ui 大家都知道,他最实用的一个组件就是表格了,简直 ...

表格固定表头，tbody加滚动条

表格固定表头，tbody加滚动条相关推荐

最新文章

热门文章