固定表头和第一列、内容可滚动的table表格

本文首发我的简书

鉴于之前有几个项目都用到了第一行第一列固定不动的表格，所以整理了一下制作这种表格的方法。
基本原理是把表格分为四个部分，左上角是固定不动的，第一行和第一列是半固定的，只能左右移动或者上下移动，而右下角部分则是可以左右上下滑动，第一行和第一列根据右下角部分的移动来动态设置scrollLeft和scrollTop。示意图如下：

废话不多说，上代码
html部分

    <div class="container"><div id="left-div"><div id="left-div1"><table><tr><th>编号</th></tr></table></div><div id="left-div2"><table id="left-table2"></table></div></div><div id="right-div"><div id="right-div1"><table id="right-table1"><tr><th>设备名称</th><th>设备类型</th><th>故障类型</th><th>故障状态</th></tr></table></div><div id="right-div2"><table id="right-table2"></table></div></div></div>

css部分

        *{margin:0;padding: 0;}table{width:100%;text-align:center;border-collapse:collapse;border-spacing:0;}table td{word-break: break-all; word-wrap:break-word; }.container{width: 600px;height: 500px;padding: 0;box-sizing: border-box;}#left-div{width:80px;float: left;}#left-div1{width: 100%;}#left-div2{width: 100%;height: 250px;overflow: hidden;}#left-table2{margin-bottom: 4px;}#right-div{float: left;width: 240px;}#right-div1{width: 100%;overflow: hidden;}#right-div2{width: 100%;height: 250px;overflow: auto;}#right-table1{width: 320px;}#right-table2{width: 320px;overflow: auto;}th,td{height: 50px;width: 80px;line-height: 50px;overflow: hidden;text-align: center;}th{color: #1E304F;background-color: #F3F8FF;}td{color: #384967;}tr:nth-of-type(odd){background: #E7F2FF;}/*可以美化一下滚动条*/#right-div2::-webkit-scrollbar {/*滚动条整体样式*/width: 4px;height: 4px;}#right-div2::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}#right-div2::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgba(0,0,0,0.1);}

如果是在移动端可以直接将scrollbar宽高设为0，后面两部分都不要了，个人感觉这种表格应用场景应该基本都在移动端。
最后js部分很简单，不过也是关键的一步(基于jQuery)

            //生成表格内容let htmlLeft = '';let htmlRight = '';for(let i=1;i<=7;i++){htmlLeft +='<tr>';htmlLeft +='<td>'+i+'</td>';htmlLeft +='</tr>';}for(let i=1;i<=7;i++){htmlRight+='<tr>';htmlRight+='<td>A</td>';htmlRight+='<td>100</td>';htmlRight+='<td>500</td>';htmlRight+='<td>1</td>';htmlRight+='</tr>';}$('#left-table2').html(htmlLeft);$('#right-table2').html(htmlRight);//滚动$('#right-div2').on('scroll',function(){let top=$(this).scrollTop();let left=$(this).scrollLeft();$('#left-div2').scrollTop(top);$('#right-div1').scrollLeft(left);})

生成内容没什么好说的，主要是第一行和第一列要根据右下角部分一起移动。
最后看看效果图

ps：有这样一段css

        #left-table2{margin-bottom: 4px;}

如果左侧不设置margin-bottom的话会出现什么问题呢

可见滚动条占据了一定的位置，其实横向滚动的时候第一行也有这个问题，只不过看得不明显而已，但是在移动端上隐藏滚动条的话是不会出现这种问题啦。

固定表头和第一列、内容可滚动的table表格相关推荐

html表格类似excel固定表头样式,(转)supertable像excel那样固定table的表头和第一列...
像excel那样固定table的表头和第一列 .left,.right{float: left;height: 297px;background-color: #ccc;} #left_topic{h ...
再谈table组件：固定表头和表列
前言本文介绍内容包括: Element UI 实现表头表列固定思考与总结 translate3d如何实现表头表列固定书承上文,在前文[Vue进阶]青铜选手,如何自研一套UI库中介绍了Vue组件库的 ...
vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列情景一:vue+element 只要在el-ta ...
如何实现表格固定表头和某列
如何实现表格固定表头和某列在开发过程中,如果数据比较多并且需要对比查看的情况下,一般是是需要固定表头和开始的某几列.可以通过一些组件进行实现.但是引用组件需要引入大量的js文件或者不满足某一方面的需 ...
antd 设置表头属性_纯css实现固定表头和锁定列
### table 表格是一个网站很常用的元素,用以展示大量的数据.在处理表格时,通常会加入许多功能,如斑马线.选中高亮.固定表头.锁定列等等,本篇文章主要介绍如何单纯的使用css实现固定行或列的功能 ...
table固定表头和首列
table固定表头和首列 html部分,结构上分为左右两部分,又分别拆开为上下两部分,总共四个结构部分,以下为固定首行和首列,需要固定多行多列的可以自行添加,如下列表中姓名为左上角固定不变的位置,可自 ...
实现固定表头和表列的table组件
前端的table在设置overflow后横向.纵向滚动.但数据比较多时,为了查看方便,希望能在纵向滚动时固定表头,在横向滚动时在左边或右边固定特定表列,这是原生不支持的. 目录实际效果设计思路普 ...
Angular8简单方式实现表格固定表头和冻结列
Angular8简单方式实现表格固定表头和冻结列 html页面: <style> .tableheader {position: relative; top: 0px; z-index: ...
纯CSS实现Table固定表头和首列
Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...

固定表头和第一列、内容可滚动的table表格

固定表头和第一列、内容可滚动的table表格相关推荐

最新文章

热门文章