关键词:
效果如下:
思路:
在表格外面套一个相对定位标签,
在该标签内再复制两个绝对定位的表格,一个作为固定头部,一个作为固定左边栏,
再在该标签内添加一个放在左上角的标签,宽高与第一个td相同
当表格滚动的时候固定头部和左边栏的表格也跟着同步滚动(通过获取和设置scrollLeft和scrollTop)
示例代码如下:
CSS:
.containt{text-align:center; padding:20px;} .containt-table{position:relative; overflow:hidden; width:500px; height:500px; margin: auto; background:lightblue;} table{border-collapse:collapse;} table td{border:1px solid #ddd; padding:15px;} .tbody{overflow:auto; width:100%; height:100%;} .thead{position:absolute; overflow:hidden; top:0; left:0; border-bottom:1px solid #ddd; background: lightsalmon;} .tleft{position:absolute; overflow:hidden; left:0; top:0; border-right:1px solid #ddd; background: lightgray} .td{position:absolute; top:0; left:0; background:lightblue; border-bottom:1px solid #ddd;}
HTML:
<div class="containt"> <h2>我的图表一</h2> <div class="containt-table"> <!-- 表格 --> <div class="tbody" onscroll="thead.scrollLeft=this.scrollLeft;tleft.scrollTop=this.scrollTop;"> <table class="table"></table> </div> <!-- 固定表头 --> <div class="thead"> <table class="table-header"></table> </div> <!-- 固定左边栏 --> <div class="tleft"> <table class="table-lefter"></table> </div> <!-- 固定左上角表格 --> <div class="td"></div> </div> </div>
JS:
var thead = document.getElementsByClassName('thead')[0]; var tleft = document.getElementsByClassName('tleft')[0]; window.onload = function(){ var tbody = document.getElementsByClassName('tbody')[0]; var table = tbody.getElementsByClassName('table')[0]; var table_thead = thead.getElementsByClassName('table-header')[0]; var table_left = tleft.getElementsByClassName('table-lefter')[0]; var fixed_td = document.getElementsByClassName('td')[0]; //示例表格数据 var data = { '': ['第一列','第二列','第三列','第四列','第五列','第六列','第七列','第八列','第九列','第十列','第十一列'], '第一行': ['1,1','1,2','1,3','1,4','1,5','1,6','1,7','1,8','1,9','1,10','1,11'], '第二行': ['2,1','2,2','2,3','2,4','2,5','2,6','2,7','2,8','2,9','2,10','2,11'], '第三行': ['3,1','3,2','3,3','3,4','3,5','3,6','3,7','3,8','3,9','3,10','3,11'], '第四行': ['4,1','4,2','4,3','4,4','4,5','4,6','4,7','4,8','4,9','4,10','4,11'], '第五行': ['5,1','5,2','5,3','5,4','5,5','5,6','5,7','5,8','5,9','5,10','5,11'], '第六行': ['6,1','6,2','6,3','6,4','6,5','6,6','6,7','6,8','6,9','6,10','6,11'], '第七行': ['7,1','7,2','7,3','7,4','7,5','7,6','7,7','7,8','7,9','7,10','7,11'], '第八行': ['8,1','8,2','8,3','8,4','8,5','8,6','8,7','8,8','8,9','8,10','8,11'], '第九行': ['9,1','9,2','9,3','9,4','9,5','9,6','9,7','9,8','9,9','9,10','9,11'], '第十行': ['10,1','10,2','10,3','10,4','10,5','10,6','10,7','10,8','10,9','10,10','10,11'], '第十一行': ['11,1','11,2','11,3','11,4','11,5','11,6','11,7','11,8','11,9','11,10','11,11'], '第十二行': ['12,1','12,2','12,3','12,4','12,5','12,6','12,7','12,8','12,9','12,10','12,11'], '第十三行': ['13,1','13,2','13,3','13,4','13,5','13,6','13,7','13,8','13,9','13,10','13,11'], '第十四行': ['14,1','14,2','14,3','14,4','14,5','14,6','14,7','14,8','14,9','14,10','14,11'], '第十五行': ['15,1','15,2','15,3','15,4','15,5','15,6','15,7','15,8','15,9','15,10','15,11'], '第十六行': ['16,1','16,2','16,3','16,4','16,5','16,6','16,7','16,8','16,9','16,10','16,11'], '第十七行': ['17,1','17,2','17,3','17,4','17,5','17,6','17,7','17,8','17,9','17,10','17,11'] } var rows = ''; for(var key in data){ rows += '<tr>\ <td>' + key + '</td>'; var row = data[key]; row.forEach(function(i){ rows += '<td>' + i + '</td>'; }) rows += '</tr>' } table.innerHTML = rows; table_thead.innerHTML = rows; table_left.innerHTML = rows; //获取第一个td的宽高 var td = table.getElementsByTagName('td')[0]; var height = td.offsetHeight + 'px'; var width = td.offsetWidth + 'px'; //设置固定表头显示的宽高 thead.style.width = tbody.clientWidth+'px'; thead.style.height = height; //设置固定左边栏显示的宽高 tleft.style.width = width; tleft.style.height = tbody.clientHeight + 'px'; //设置左上角固定标签的宽高 fixed_td.style.width = width; fixed_td.style.height = height; }
在线演示:http://sandbox.runjs.cn/show/lcbhykwr
实现固定表头和表列的table组件
前端的table在设置overflow后横向、纵向滚动。但数据比较多时,为了查看方便,希望能在纵向滚动时固定表头,在横向滚动时在左边或右边固定特定表列,这是原生不支持的。目录实际效果设计思路普通表格固定表... 查看详情
table固定表头固定列实现横向纵向滚动
...,设置有tbody的div固定高度,超出overflow:scroll;至于横向滚动的问题,可以设置position:sticky,然后根据左右浮动的个数及对应列所在的index,计算left或者right的长度。因为table里thead和tbody本身无法设置高度,超出用stroll这种方式... 查看详情
滚动期间表头需要保持固定[重复]
】滚动期间表头需要保持固定[重复]【英文标题】:Tableheaderneedstoremainfixedduringscrolling[duplicate]【发布时间】:2013-09-0917:48:35【问题描述】:我有一个带有标题和正文的表格,我希望表格标题在正文上发生滚动时保持固定。表格是... 查看详情
具有固定位置和可滚动表数据元素的 HTML 表头
】具有固定位置和可滚动表数据元素的HTML表头【英文标题】:HTMLTableHeaderwithFixedPositionandscrollabletabledataelements【发布时间】:2017-03-2617:57:13【问题描述】:这个问题的主要目的是固定表格标题,当我们垂直滚动时,只有元素应该... 查看详情
自定义表格固定表头,随着表格内容增加出现滚动条
...div把两个表格包在一起,并且设置宽度,在让它可以横向滚动,overflow-x:auto3、在设置里面两个table的宽度为一样,在设置内容表格overflow-x:hidden;overflow-y:auto<!--表格表头固定--HTML部分><divclass="wrap_table"><divclass= 查看详情
纯css控制-表格表头固定,内容多时滚动内容
<html><head><styletype="text/css">*{margin:0;padding:0;}/*所有内容都在这个DIV内*/.all{width:100%;border:1pxsolid#000000;}/*表头在这个DIV内*/.title{width:500px;/*这个宽度需要与下面的内容的DIV相等*/}/*表格样式*/table{w 查看详情
Flexbox 类型的固定表头,表格标记的可滚动内容
】Flexbox类型的固定表头,表格标记的可滚动内容【英文标题】:Flexboxtypefixedheader,scrollablecontentfortablemarkup【发布时间】:2018-05-2523:31:32【问题描述】:我正在使用一个使用传统表标记的数据表,但我想要的是我的表从页面中的... 查看详情
实现html表头固定,表格内的信息向上滚动
效果如下:<!doctypehtml>Table.table{width:100%;border-collapse:collapse;border-spacing:0}.fixedThead{display:block;width:100%}.scrollTbody{display:block;height:262px;overflow:auto;width:100%}.tabletd 查看详情
elementui组件表格高度以及表头固定表身滚动方法
1.表格高度:在el-table标签里增加一个类名classA,然后写css样式:.classAth,.classAtdpadding:0!important;height:20px;//需要的高度line-height:20px;2.表头固定,表身超过高度自动滚动直接在el-table标签里增加height:100%就可以了。 查看详情
带有滚动正文的引导固定表头
】带有滚动正文的引导固定表头【英文标题】:bootstrapfixedtableheaderswithscrollingbody【发布时间】:2015-11-3006:16:19【问题描述】:编程新手,也是第一次在这里发帖。我在面板中的引导表有点问题。我有一个下拉菜单,用户可以在... 查看详情
bootstraptable实现固定悬浮table表头并可以水平滚动
...,需要将表格头部固定,而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap3,故也可以叫做bootstraptable。需要实现的是:表格头部固定,并且支持水平滚动htmlcode(sourcetable):<tableid="top_fix_table"border="0"cellpadding="4"cell... 查看详情
表格打印怎么固定表头和底部?
...到一些单张的长、大的表格,显示屏不足以显示全部,在滚动浏览表格时,需要时时查看的表头,未能保留,导致不能方便察看表格,同时在打印时让每一页都有表头而不用自己一一添加怎么办呢?其实很简单,下面小编教你怎... 查看详情
如何在相对布局中添加固定标题和滚动视图表行?
】如何在相对布局中添加固定标题和滚动视图表行?【英文标题】:Howtoaddfixedheaderandscrollviewtablerowsinrelativelayout?【发布时间】:2021-12-2902:13:54【问题描述】:我的目的是用可滚动的行固定表头,以便用户在表内添加值时表头可... 查看详情
javascript:固定table的表头
当表格数据很多,以致于容器块元素出现滚动条。而在滚动滚动条的时候,数据行会被块元素遮挡。若要保持表格的head部分始终在可视范围内,我们需要对表头进行特殊的样式设置。下面的jsp代码可以实现表头固定,经过测试... 查看详情
[前端][css]纯css实现纵向滚动固定表头与横向内容滚动
参考技术A这次要实现的目标是类似这种,纵向滚动时表头固定,横向滚动时,表头跟着滚动最基础的思路就是表头和内容是用两个表格来显示(图来自https://zhuanlan.zhihu.com/p/33280304),关于怎么保存表头和内容列宽一致链接里这... 查看详情
datatables表格固定栏使用方法(代码片段)
...栏目固定不动,如下图所示:从上图我们可以看出,表格滚动的时候,左边5栏是不动的。现在说一下实现方法:插件地址:https://datatables.net/ 使用方法:wageTable为表格的ID。vartable=$(‘#wageTable‘).DataTable(scrollX:true,scrollCollapse:... 查看详情
水平和垂直可滚动的大表格
】水平和垂直可滚动的大表格【英文标题】:Horizontallyandverticallyscrollablelargetable【发布时间】:2020-02-0705:35:00【问题描述】:好吧,这是关于带有固定页眉和页脚的无聊滚动表的下一篇文章。这个话题来自于HTML的刚性结构。源... 查看详情
css手写一个表头固定(代码片段)
Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大,所以决定手写表头固定主要遇到的个问题就是固定以... 查看详情