冻结表格行列的思路

html和css没有提供对表格冻结行列的属性，但是我们操作大型，需要滚动表格的时候，处于方便用户查看的关系，表格往往需要这个功能。

一、只需要冻结某一行（列）的情况

　　步骤1、把看起来是一个整体的表格拆分成两部分，table1负责固定部分如thead，而table2负责可以拖动的部分如tbody。

        示例代码：

 1 <div class="table-out nicescroll-table">
 2     <div class="table1" >
　　　　　　
           
           
 3         
 4         <table>
 5             <thead>
 6                 <tr>
 7                     <th class="width-100">学生名字th>
 8                     <th class="width-100">学号th>
 9                     <th class="width-100">出勤次数th>
10                     <th class="width-200">周一th>
11                     <th class="width-200">周二th>
12                 tr>
13             thead>
14         table>
15     div>
16     <div class="table-main">
17         
18         <table>
19             <tbody>
20                 <tr>
21                     <td class="width-100">张小月td>
22                     <td class="width-100">2123432td>
23                     <td class="width-100">7td>
24                     <td class="width-200">不错td>
25                     <td class="width-200">不错td>
26                 tr>
27                 <tr>
28                     <td class="width-100">张大月td>
29                     <td class="width-100">2123432td>
30                     <td class="width-100">7td>
31                     <td class="width-200">td>
32                     <td class="width-200">td>
33                 tr>   
34                 <tr>
35                     <td class="width-100">张月月td>
36                     <td class="width-100">2123432td>
37                     <td class="width-100">7td>
38                     <td class="width-200">td>
39                     <td class="width-200">td>
40                 tr>
41             tbody>     
42         table>                
43     div>

 

　　步骤2、把两个table固定好了之后，监听table2的滚动，用table2的滚动带动table1的滚动（通过设置css里的left 或者 scroll，如果是绝对定位那么只能用设定css中left的方法）

 

1  $('.table2').scroll(function() {
2         var scrollLeft = $(this).scrollLeft();
3         $('.table1').scrollLeft(scrollLeft);
4     });

 

 　　效果图如下：

 

 

 

二、同时冻结行和列的情况

 　　步骤1、把看起来是一个整体的表格拆分成四个部分

 

        示例代码：

 1 

 2     
 3     

 4          5 6 7 8 91011121314

             

                 

                     
学生名字
                     
学号
                     
出勤次数
                     
周一
                     
周二
                 
             
         
15     
16     

17         181920212223242526272829303132333435363738394041

             

                 

                     
张小月
                     
2123432
                     
7
                     
不错
                     
不错
                 
                 

                     
张大月
                     
2123432
                     
7
                     

                     

                 
   
                 

                     
张月月
                     
2123432
                     
7
                     

                     

                 
             
     
         
                
42     
43     

44         454647484950515253545556575859606162

             

                 

                     
张小月
                     
2123432
                     
7
                 
                 

                     
张大月
                     
2123432
                     
7
                 
   
                 

                     
张月月
                     
2123432
                     
7
                 
             
         
  
63     
 
64     

65         6667686970717273

             

                 

                     
学生名字
                     
学号
                     
出勤次数
                 
             
         
74     
75 
 

        步骤2、把四个table固定好了之后，监听table-main的滚动，用table-main的滚动带动table-top的左右移动和table-left的上下移动。在这个示例里，我对table-left用到了绝对定位，所以给table-left设定scroll无效，但是可以使用改变table-left的css中top的属性值来使得table-left上下移动。

var tableLeftTop1 = parseInt($('.table-left').css('top'));
$('.table-main').scroll(function() {
    var scrollLeft = $(this).scrollLeft();
    var scrollTop = tableLeftTop1 - $(this).scrollTop()+'px';
    $('.table-left').css('top',scrollTop);
    $('.table-top').scrollLeft(scrollLeft);
});

         示例效果图：

 

        另外，你也可以将四个table这样分类，这两种方法怎么分都行，万变不离其宗，用main-table的左右移动带动table-top和table-left的移动：

我这里为了使table的滚动条更为美观些，我使用了nicescroll滚动条插件。否则你所见到的就是又粗又笨拙的默认滚动条啦~（偷笑脸）

table冻结行列的demo链接：https://github.com/zhangqiongyue/smallDemo

转载于:https://www.cnblogs.com/zhangqiongyue/p/6146996.html