1.区域划分，列锁定区，行锁定区

2.需要分四个Table，每个区对应一个table

共锁区和行锁区放在一个div并浮动,行锁定区指定最大宽度

列锁区和内容区是在一个div中，并浮动，列区指定最大高度，内容区指定最大宽度和最大高度，用于产生滚动条

这两个div中最好是中间夹着隔行div,比如使用bootstrap的class

<div class="clearfix"></div>

3.Html代码

a.先给到table指定的高和宽

table thead th, table thead tr {line-height: 12px;width: 80px;
}
table tbody tr {line-height: 12px;width: 80px;
}

所有的四个table所属的div，放在一个总div中，div的宽度为共锁区和行锁区的宽度之和（列锁区和内容锁区宽度之和）

<div style="width:1200px;"><!-- 所有区内容 -->
</div>

b.共锁区和行锁区 div

其中style中table-layout:fixed;作用为将table行中宽高为指定的宽高

    <!-- 共锁区div --><div style="float:left;width:200px;" ><table style="table-layout: fixed;"><!--共锁区内容 --></table></div><!-- 行锁区div --><div id="top-topic" style="width:1200px;overflow-x:hidden;float: right;"><table style="table-layout: fixed;"><!-- 行锁区 --></table></div>

c.列锁区和内容锁区div

<!-- 列div -->
<div id="left-topic" style="width:200px;max-height:600px;overflow-y:hidden;float: left;"><table style="table-layout: fixed;"><!-- 列锁区内容 --></table>
</div>
<!-- 内容div -->
<div id="detail_content" style="float:right;overflow: scroll;width:1200px;max-height:600px;"><table style="table-layout: fixed;"><!-- 内容锁区 --></table>
</div>

d.整合后html

<div style="width:1200px;"><!-- 共锁区div --><div style="float:left;width:200px;" ><table style="table-layout: fixed;"><!--共锁区内容 --></table></div><!-- 行锁区div --><div id="top-topic" style="width:1000px;overflow-x:hidden;float: right;"><table style="table-layout: fixed;"><!-- 行锁区内容 --></table></div><div class="clearfix"></div><!-- 列div --><div id="left-topic" style="width:200px;max-height:600px;overflow-y:hidden;float: left;"><table style="table-layout: fixed;"><!-- 列锁区内容 --></table></div><!-- 内容div --><div id="detail_content" style="float:right;overflow: scroll;width:1000px;max-height:600px;"><table style="table-layout: fixed;"><!-- 内容锁区 --></table></div>
</div>

e.JS代码

$(function(){$("detail_content").scroll(function(){let scrollLeft = $("#detail_content").scrollLeft();let scrollTop = $("#detail_content").scrollTop()$("#top-topic").scrollLeft(scrollLeft);$("#left-topic").scrollTop(scrollTop);});
});

效果demo

TableLock

4.欠缺及升级版代码

滚动条拉到最下或最右，会有对不齐，因为存在了滚动条后，其实行锁区和内容锁区的内容宽度已经不一样了，那如何补呢，那么内容区也不能放滚动条，将滚动条置为隐藏，使用一个div做为滚动条控件

上代码,HTML部分,宽度增加一个滚动条宽度，float 全部为left

<!-- 宽度加一个滚动条的宽度  -->
<div style="width:1215px;"><!-- 共锁区div --><div style="float:left;width:200px;" ><table style="table-layout: fixed;"><!--共锁区内容 --></table></div><!-- 行锁区div --><div id="top-topic" style="width:1000px;overflow-x:hidden;float: left;"><table style="table-layout: fixed;"><!-- 行锁区内容 --></table></div><!-- 格式清除 --><div class="clearfix"></div><!-- 列div --><div id="left-topic" style="width:200px;max-height:600px;overflow-y:hidden;float: left;"><table style="table-layout: fixed;"><!-- 列锁区内容 --></table></div><!-- 内容div --><div id="detail_content" style="float:left;overflow: hidden;width:1000px;max-height:600px;"><table style="table-layout: fixed;"><!-- 内容锁区 --></table></div><!-- 垂直滚动条div --><div id="vertical_scroll_div" style="float:left;overflow: scroll;width:15px;max-height:600px;"><div id="table_height" style="width: 15px;"></div></div><!-- 格式清除 --><div class="clearfix"></div><!-- div占用 --><div style="height:15px;width: 200px;overflow-y: hidden;float: left;"></div><!-- 水平滚动条div --><div id="horizontal_scroll_div" style="float:left;overflow: scroll;width:1200px;height:15px;"><div id="table_width" style="height: 15px;"></div></div>
</div>

$(function(){$("#table_height").height($("#detail_content>table").height());$("#table_width").width($("#detail_content>table").width());$("#vertical_scroll_div").scroll(function () {scroll('vertical');});$("#horizontal_scroll_div").scroll(function () {scroll('horizontal');});
});function scroll(type) {if ('vertical' === type) {// 垂直滚动let scrollTop = $("#vertical_scroll_div").scrollTop()$("#left-topic").scrollTop(scrollTop);$("#content_div").scrollTop(scrollTop);} else if ('horizontal' === type) {// 水平滚动let scrollLeft = $("#horizontal_scroll_div").scrollLeft()$("#top-topic").scrollLeft(scrollLeft);$("#content_div").scrollLeft(scrollLeft);}
}

Html实现Excel锁定表头效果相关推荐

如何在 web 页面中实现类似 excel 固定表头 / 标题行的效果？
1. 如果没有报表工具或者使用的开源报表工具中没有固定表头功能时,可以使用代码开发方式实现,例如可以通过 jQuery 方式实现固定表头效果,实现思路如下: 用 div 替换 table,将要冻结的表 ...
js锁定表头和列，实现类似execl锁定效果
js锁定表头和列,实现类似execl锁定效果,项目实现后效果如下: js代码 <script type="text/javascript"> function FixT ...
一个实用的表格（锁定表头，可调整单元格大小，可排序）
昨天在网上找到一个不错的表格显示,该表格可以锁定表头,可调整单元格的大小,同时还可以对数据进行排序,显示效果如下: 原代码: <!DOCTYPE HTML PUBLIC "-//W3C ...
锁定表头和固定列(Fixed table head and columns)
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery. 因为方法很简单,就未封装成插件的形式,仅 ...
发布锁定表头的一个思路
发布锁定表头的一个思路发布锁定表头的一个思路.垂直滚动时表头不动,水平滚动时表头可以同步滚动.在这里呢我只介绍我的思路,因为我觉得思路要比代码重要得多.当然我的想法已经实现了. 网页两个:一个是放置 ...
java多表头导出excel表格_【每日一点】1. Java如何实现导出Excel单表头或多表头
一.背景在后台项目中,经常会遇到将呈现的内容导出到Excel的需求,通过都是导出单个表头的Excel文件,如果存在级联关系的情况下,也就需要导出多表头的场景.今天这篇文章就是分享导出Excel单表头 ...
excel斜线表头的制作
内容提要:本文介绍excel斜线表头的制作方法,并给出实例讲解. Excel中,如何制作复杂的斜线表头?斜线表头,就是包含有斜线和文字的单元格.IT部落窝给出方法,让学习者少走弯路.利用直线和文本框工 ...
WPS2016怎么固定/锁定表头_WPS如何设置行和列固定不动
1.将鼠标移到需要固定的行(表头所在的行)的下一行的行标题(每一行前显示当前是第几行的数字位置)上,然后点击鼠标左键选中这一行. 2.点击一下菜单栏的"视图". 3.然后点击一下视 ...
锁定表头和固定列(Fixed table head and columns)(转载)
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery. 因为方法很简单,就未封装成插件的形式,仅 ...
plsql创建中文表头_如何使用快捷键来提升Excel斜线表头绘制速度，照着学就行了...
小编看到在很多朋友分享的绘制Excel斜线表头的教程中,是通过使用多次敲击空格键的方式来调整斜线表头内的文字位置.我这还有一种方法,可以利用快捷键来提升绘制Excel斜线表头的速度,感兴趣的朋友们可以 ...

Html实现Excel锁定表头效果