摘要：在使用表格显示数据时我们经常会遇到数据过多无法一屏完全显示的问题，这个时候我们就会给用户显示滚动条来拖动。但是多数情况下表格是带有表头的，纵向拖动往往就看不到表头；而横向拖动又会出现看不到主题列（例如统计某人基本信息时姓名就是主题列），这个时候怎么办呢？答案就是行列锁定。
主要内容：
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属性使其相对位置保持不表。下面我们来看一下具体的实现：
最低0.47元/天 解锁文章
1137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
