Angular8简单方式实现表格固定表头和冻结列

html页面：

<style>
.tableheader {position: relative;  top: 0px;  z-index: 105;}
.frozencol {position: relative;left:0px;}
</style><div id="tablediv" (scroll)="this.scroll($event)" style="width:100%;height:calc(100% - 30px);overflow: auto;"><table cellspacing="0"><tr class="tableheader"><th class="frozencol">#</th><th class="frozencol">列1</th><th>列2</th><th>列3</th><th>列4</th></tr><tr *ngFor="let r of datarows;let i=index"><td class="frozencol">{{i+1}}</td><td class="frozencol">{{r[0]}}</td><td class="frozencol">{{r[1]}}</td><td class="frozencol">{{r[2]}}</td><td class="frozencol">{{r[3]}}</td></tr></table>
</div>

.ts代码：

  public scroll(event){var x=document.getElementById('tablediv').scrollLeft;var y=document.getElementById('tablediv').scrollTop;//固定列//所有使用CSS类frozencol的td将被冻结，包括表头的thvar tds=document.getElementsByClassName('frozencol');for(var i=0;i<tds.length;i++){tds[i].style.left=x + 'px';}//固定表头document.getElementById('tablediv').getElementsByTagName('tr')[0].style.top=y + 'px';}

Angular8简单方式实现表格固定表头和冻结列相关推荐

vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列情景一:vue+element 只要在el-ta ...
如何实现表格固定表头和某列
如何实现表格固定表头和某列在开发过程中,如果数据比较多并且需要对比查看的情况下,一般是是需要固定表头和开始的某几列.可以通过一些组件进行实现.但是引用组件需要引入大量的js文件或者不满足某一方面的需 ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
H5移动端滑动表格固定表头和首列（纯css实现）
HTML部分 <template><div class="contain"><table class=" ...
复杂grid 支持多表头,固定表头，冻结列，合并行
该组件支持三种渲染形态,因为有些简单的表格没必要去做太复杂的处理. 支持自适应页面宽度和可以设置固定宽度,理论上是所有浏览器都支持,但是因为我引用了一些工具类,处理数组的filter.map 所以向前 ...
php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
antd 设置表头属性_纯css实现固定表头和锁定列
### table 表格是一个网站很常用的元素,用以展示大量的数据.在处理表格时,通常会加入许多功能,如斑马线.选中高亮.固定表头.锁定列等等,本篇文章主要介绍如何单纯的使用css实现固定行或列的功能 ...
再谈table组件：固定表头和表列
前言本文介绍内容包括: Element UI 实现表头表列固定思考与总结 translate3d如何实现表头表列固定书承上文,在前文[Vue进阶]青铜选手,如何自研一套UI库中介绍了Vue组件库的 ...
实现固定表头和表列的table组件
前端的table在设置overflow后横向.纵向滚动.但数据比较多时,为了查看方便,希望能在纵向滚动时固定表头,在横向滚动时在左边或右边固定特定表列,这是原生不支持的. 目录实际效果设计思路普 ...

Angular8简单方式实现表格固定表头和冻结列

Angular8简单方式实现表格固定表头和冻结列

Angular8简单方式实现表格固定表头和冻结列相关推荐

最新文章

热门文章