摘要：行列冻结是处理表格非常常见的应用，我们都知道用excel可以很轻松的实现这一功能。但html编写的web网页表格中并没有冻结表格这一功能，那又要如何才能实现表格的 行 列 冻结呢？

行列冻结是处理表格非常常见的应用，我们都知道用excel可以很轻松的实现这一功能。但html编写的web网页表格中并没有冻结表格这一功能，那又要如何才能实现表格的'行''列'冻结呢？

通过百度或者其他搜索引擎搜索确实可以找到很多解决案例，比如，把需要冻结的行或者列从表格中拆分出来，然后计算行列的高度和宽度，使得被拆分后的内容组合起来后表面上看去仍然是完整的一张表格；又比如用jquery的插件来实现等等。这些方法虽然最后都能实现行列冻结的效果，但太复杂，而且很容易出错，一个简单的表格冻结效果，结果写了一大推的代码。

既然博主敢说这些方法不太好，自然是有更好方法可以实现表格冻结效果，下面就来看看心月博主是如何简单快速的实现web表格行列冻结的。

在解决行列冻结前先来说说表格行列冻结的原理：

在不冻结行列的正常情况下拖动表格时，整个表格都会朝与拖动相反的方向移动(前提是没有修改系统默认滚动参数设置)，比如往下拖动，整张表格网上移动，往右拖动整张表格往左移动，在此情景下如果想保持某一行或某几行的的位置能一直保持在一个地方，就得把这几行给拎出来成为一个独立体，然后往回拖，拖到你想让他出现的位置，接下来每次把整个表格往下拖动一段距离，前面的独立体就得往回拖一段距离，而且独立体往回拖的距离与整个表格往下拖动的距离是相等的。表格列冻结也是如此，不过此时表格拖动的方向是水平方向。

如果没有看懂表格行列冻结的原理，没关系，下面就是本次文章的重点内容了：

这里我并没有使用表格分块，也没有使用插件，只有一个table表格和一个div块，然后给div加上垂直滚动和水平滚动

首先需要确定需要冻结的行和列，以及被冻结的行和列需要在什么位置显示，此次我冻结的是第一行和以及第1到3列，及上图序号、网站域名、网站名这3列，冻结的显示的位置是左上角黑白背景交界处。如下图所示

在前面的表格冻结原理中已经知道，表格冻结无非就是：表格滚动——位置回拉；所以，只需要给table外层的div加一个滚动事件，在滚动事件中处理位置回拉即可实现表格冻结。废话不多说直接上代码(页面宽度问题图片有点小，可以右键复制图片链接在新窗口打开看)：

前图表格，白色背景内是可视区域，表格在垂直方向滚动前需要计算出表格顶部距可视区顶部的距离，在表格需要被冻结的行(第一行)滚动到可视区顶部(被冻结后停留位置)前都不需要做位置“回拉处理”，直到表格第一行移动到可视区顶部开始对表格进行“回拉处理”，给第一行加一个相对定位属性(position:relative)如果给整行加相对定位不起作用就给第一行的每一列单独加相对定位。然后，整张表格每往下移动1px，就给第一行的left值加1px。

(之所以用相对定位而不用绝对定位，是因为绝对定位的的内容会脱离整个表格，如果非冻结内容和对应的行或者列的宽高不一致就会出现冻结内容和非冻结内容错位的现象)

因为前面已经计算出表格未滚动时顶部距离可视区顶部的距离，因此只需用滚动的距离减去前面的顶部距离得到的值就是第一行需要回拉的距离，也就是left值。

水平方向也是同样的道理。

至此，表格行列冻结就实现了，而且此方法可以实现任意行或者任意列的冻结。

如果没有看明白的话，可以照着图片给出的代码敲一遍看看实际效果。(自己动手敲出来的代码印象才会深，所以在这里代码就是截图给出的)。(div table 的id属性，class属性截图中都有，表格第一行是标题行所以用的是th不是td，别忘了引入jq文件。另外为了保证被冻结的行或者列的内容不被遮住一定要加z-index值，保证被冻结行列的内容始终在被冻结单元格之上。另外行列同时冻结时，z-index的最好不要一样，希望谁的层级高谁的z-index值就大)。

如果冻结的行或者列比较多，且是连续的，可以用循环减少重复代码。