滚动表格固定表头和左边栏

湘陵 湘陵     2022-09-24     168

关键词:

效果如下:

思路:

  在表格外面套一个相对定位标签,

  在该标签内再复制两个绝对定位的表格,一个作为固定头部,一个作为固定左边栏,

  再在该标签内添加一个放在左上角的标签,宽高与第一个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等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大,所以决定手写表头固定主要遇到的个问题就是固定以... 查看详情