摘要：在使用表格显示数据时我们经常会遇到数据过多无法一屏完全显示的问题，这个时候我们就会给用户显示滚动条来拖动。但是多数情况下表格是带有表头的，纵向拖动往往就看不到表头；而横向拖动又会出现看不到主题列（例如统计某人基本信息时姓名就是主题列），这个时候怎么办呢？答案就是行列锁定。
主要内容：
1.行列锁定的常用方法
2.IE下实现行列锁定
3.使用jQuery开发一个简单的行列锁定插件
一、行列锁定的常用方法
从使用上来看，要实现行列锁定的效果无非就是使用第三方组件和自己从零做起一步步实现。第三方组件一般比较强大，除了行列锁定的功能之外一般还包括排序、筛选等（例如Ext的Locking-grid扩展组件），但是使用第三方组件也会造成一些其他的问题，或者说有些时候你根本就没有办法使用第三方组件（我遇到的就是这种情况）。今天我们主要讨论的是如何利用基本的html来自己实现行列锁定。自己实现table锁定行列的方法基本上有两种：一种是利用多个table拼接，最终"拼"成一个大的table。这种情况一般将表头和主题列分别放到单独的table中，数据行放到另一个table，拖动数据所在的table时利用js动态实现其他table的同步拖动。第二种就是利用单独的table，通过设置table行和列相对位置来实现行列锁定。两种方式相比较而言，第一种的方式更加容易控制一些，而且由于它将一个大表格分散到多个table中更有利于完成其他复杂功能；第二种实现比第一种效果要好一些，而且更有利于封装和扩展。由于我所遇到的情况是必须在原有html基础上实现行列锁定，因此这里就主要说一下第二种方式。
二、IE下实现行列锁定
由于我们下面说的方法主要利用tr、td的position:relative样式，而在新的css标准中没有对tr进行position:relative定义，因此除了IE在firefox4、chrome等新版本浏览器中都无法使用我们下面所说的方法（事实上IE9也是使用新标准，只不过其对兼容性做了处理，因此我们这种方法基本在IE所有版本中都是可行的）。我们的实现原理很简单：首先在table最外层包装一个div用来显示滚动条，接着设置tr和td的position和z-index样式控制其相对显示，然后在滚动的时候动态修改tr和td的top和left属性使其相对位置保持不表。下面我们来看一下具体的实现：
三、使用jQuery开发一个简单的行列锁定插件
如果仅仅从实现上来说，到了第二部我们今天的内容就结束了。但是聪明的读者或许已经发现上面的用法存在的问题：第一我们需要手动的添加很多的class样式、需要对原有布局修改；第二我们上面使用了expression这个IE所特有的样式（虽然我们上面说过这个差距不适用于其他浏览器新版本，但是不代表不适用于旧版本，如果我们修改expression为纯js方式也就可以使用于其他低版本浏览器）。我们刚才说过第二种方式有一个优点就是便于封装而且几乎不必对原table布局作出修改，因此我们不妨对整个应用进行一下简单的封装，使其只需要简单的添加一行js就能够完美的运行。虽然在这个过程中我们只是将手动添加class样式换成动态添加、将expression表达换成onscroll事件，但是一切看起来确实那么的不一样。
下面就是我们使用jQuery进行封装的代码TableLock.js：
具体的样式表文件TableLock.css：
假设现在你有有这样一个页面，当然它不具备锁定行列的功能：
如果你需要让它拥有锁定行列的功能，只需要引入TableLock.js和TableLock.css(当然不要忘了jquery类库)，然后添加一句简单的代码即可:
下面是完整的页面代码：
下面是运行后的效果：
注意：请确保在IE下.divBoxing具有position:relative;样式，否则在IE6和IE7中锁定行列将会溢出外层div，具体参见IE6 bug with overflow and position:relative 。
本作品 采用知识共享署名 2.5 中国大陆许可协议 进行许可，欢迎转载，演绎或用于商业目的。但转载请注明来自崔江涛（KenshinCui） ，并包含相关链接。
分享到：
相关推荐
表格的行列锁定，采用js+css将table的行头列头冻结，自我感觉已经比较较完美了
为了解决这个问题，"兼容浏览器的table行列锁定"技术应运而生。这种技术允许用户在滚动表格时，保持特定的行或列始终可见，提高用户的浏览体验。 首先，我们需要理解“行列锁定”的概念。行锁定（Row Locking）指的...
本篇文章将详细讲解如何利用jQuery实现表格（table）的行列锁定功能，这对于创建数据量较大但需要保持关键信息可视化的网页界面至关重要。 首先，锁定表格的行或列可以让用户在滚动页面时始终保持某些重要的头部...
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
3. 接下来，函数创建了四个新的div元素，分别用于存放锁定的表头（`_tableHead`）、锁定的列（`_tableColumn`）、浮动的数据部分（`_tableData`）以及一个用于克隆表头和锁定列的临时div（`_tableFix`）。...
在网页设计中，HTML表格（`<table>`）是一种常用的数据展示方式，尤其在处理大量结构化数据时。然而，当表格内容过于庞大，导致表格的长度和宽度超过屏幕显示范围时，用户需要滚动查看完整内容，这可能使得表头和...
在网页设计中，"html行列表头锁定"是一种常见的需求，尤其在处理大数据表格时，为了保持用户在滚动查看表格内容时能始终看到列标题，就需要实现表头的固定锁定。这种技术通常应用于数据可视化、报表展示或者数据分析...
JS冻结窗格（表头锁定）插件，自适应表格单元格宽度，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器），代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结，因为有防止重复冻结功能)，...
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
html表格列锁定，能够锁定多列并拖拽，如果锁定的列超出div宽度的话，会取消拖拽效果，只有当需要锁定的列不大于div时显示正常
在Web开发中，表格（Table）是展示数据的常用元素，但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制，以便在滚动时保持特定行或列始终可见，提升用户浏览大量数据时的体验。下面将详细探讨...
"LockTable.rar" 提供的是一款专为Android Studio设计的自定义表格控件——TableView，它能够有效地帮助开发者创建出功能丰富的表格视图，并且特别支持第一行和第一列的冻结锁定功能。这一特性在处理大数据时尤为...
总结来说，实现固定table列头不动的技术主要涉及到CSS的绝对定位、JavaScript的事件监听和DOM操作。通过JavaScript动态调整固定表头的宽度和位置，以及CSS使其在滚动时始终保持可见，从而达到预期效果。这个方法不仅...
修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性问题...
修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性...
在HTML中，`<table>`元素用于创建表格，`<thead>`则用于定义表格的头部，通常包含表格的列名。在本Demo中，`<thead>`被用来固定表头，即使用户滚动页面，表头也会始终显示在顶部。 JavaScript是一种脚本语言，常...
压缩包内的"html锁定表头冻结行列.html"文件，是一个包含JavaScript代码的HTML文件，它的核心原理是通过监听窗口滚动事件，动态调整表头的位置，使其始终位于可视区域顶部。以下是实现这一功能的主要步骤和涉及的...
JQuery固定表头 及左侧列
ePivotTable是一款基于ASP.NET 2.0的，用来展示Microsoft SQL ...在IE中支持行列头锁定 7.灵活的样式设置 8.小计与合计的行列位置可以显示在明细行列之前或之后 9.支持状态保存 10.有条件地提供源代码