如何实现表格固定表头和某列

在开发过程中，如果数据比较多并且需要对比查看的情况下，一般是是需要固定表头和开始的某几列。可以通过一些组件进行实现。但是引用组件需要引入大量的js文件或者不满足某一方面的需求。这时候就需要自己动手写一个这样的效果。

需求

表格是页面的主体部分，表格的数据量比较大，需要表格左右可以滑动，上下也可以滑动。在滑动中表头固定，第一列，第二列固定。前两列在固定在页面上的前提下需要能够上下滑动。页面的滚动轮必须在窗口上，不可以设置在表格内部。

设计过程

具体实现

元素结构

 var TableWrap = React.createClass({render:function(){var data = this.props.data;return(<div className='table-wrapper'><Header className = 'table-header' /><div className="table-body-wrapper"><Tablefix className = 'table-fixded'  data = {data} /><Tablebody className='table-body'  data = {data} /></div></div>)}})

说明：采用react-dom组件渲染dom元素，Header表示表头部分的table表格，Tablefix表示固定列的table表格，TableBody 表示正常可滚动部分的table表格

表格联动

$(funciton autoWidth(){for(var i = 1 ; i <= $('.tablebody tr').length ; i++){var tableH = $(".tablebody tr:nth-child("+i+")  td").outerHeight(true);$(".Tablefix tr:nth-child("+i+")  td:last-child").css("height",tableH);}
})

说明1：采用outerHeight(true) 的目的是获取全部的高度，包括边框、padding、margin等
说明2：只需要设置对应行的一个td高度即可

定位设计

$(function fixed(){$(window).scroll(function () {if($(this).scrollLeft()>0){if($(this).scrollLeft()<60){ //60用于控制灵敏度，数值越小 灵敏度越高$(".tablefix-wrapper").css("left","0px");}else {$(".tablefix-wrapper").css("left",$(this).scrollLeft());}}if($(this).scrollTop()>0){if ($(this).scrollTop()<60) {$(".header-wrapper").css("top","0px");}else {$(".header-wrapper").css("top",$(this).scrollTop());}}})
})

说明1：定位不使用fixed的原因定位后无法实现上下滑动的效果且固定列的表格和滚动表格无法实现滚动联动
说明2： .table-body-wrappe是相对定位 .header-wrapper和.tablefix-wrapper是相对于父级的绝对定位。采用绝对定位的目的是实现固定列的表格和滚动列表格的滚动联动效果。

展示效果

实现表头上下固定，左右可以滚动
实现固定列左右固定，上下可以滑动
滚动条位于窗口，便于滑动

如何实现表格固定表头和某列相关推荐

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

如何实现表格固定表头和某列

如何实现表格固定表头和某列

需求

设计过程

具体实现

展示效果

如何实现表格固定表头和某列相关推荐

最新文章

热门文章