锁定表头和固定列(Fixed table head and columns)

前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。

因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。

支持IE6+，FF3.6+，Opera9+，Chrome9+

一、实现方式

这里的准备使用4个table实现，具体如下图：

上图红色部分为要取出来的部分，蓝色部分为拼接后可以看到的部分。最终结果如下图

实现后效果：

姓名班级成绩主科文科理科总分语文数学英语政治历史地理物理化学生物学生1班级364 104 150 93 32 82 26 44 83 678 学生2班级2120 66 150 85 5 50 72 32 90 670 学生3班级2133 61 49 97 67 13 64 8 60 552 学生4班级37 136 105 86 56 11 98 29 18 546 学生5班级2129 146 62 64 67 1 70 57 16 612 学生6班级245 29 51 91 9 2 37 3 26 293 学生7班级128 25 127 96 43 90 75 13 28 525 学生8班级378 64 20 29 70 92 100 69 30 552 学生9班级265 10 139 19 57 86 57 79 76 588 学生10班级2113 142 4 100 41 69 12 45 20 546 学生11班级341 84 42 23 89 88 6 4 21 398 学生12班级14 102 111 61 76 12 25 66 39 496 学生13班级249 144 56 75 18 58 39 13 88 540 学生14班级1119 81 73 53 37 88 79 69 30 629 学生15班级3120 78 86 58 50 7 20 42 24 485 学生16班级165 71 9 64 45 31 18 53 5 361 学生17班级172 139 24 20 39 49 19 21 23 406 学生18班级350 84 53 70 77 81 38 80 25 558 学生19班级156 147 134 59 57 31 48 86 7 625 学生20班级1103 38 96 100 21 88 36 37 18 537 学生21班级1133 150 28 37 96 88 12 36 87 667 学生22班级2140 59 42 95 94 50 3 58 63 604 学生23班级12 51 19 17 19 7 93 35 49 292 学生24班级367 2 91 23 22 37 79 52 63 436 学生25班级329 17 149 44 13 29 98 70 6 455 学生26班级3126 117 112 11 100 55 87 1 18 627 学生27班级3144 115 131 97 19 92 79 4 72 753 学生28班级2107 77 143 94 89 90 35 70 3 708 学生29班级314 33 44 78 5 67 27 49 23 340 学生30班级377 117 51 75 74 43 25 2 24 488 学生31班级176 140 148 50 100 33 83 81 23 734 学生32班级129 25 146 28 79 73 47 8 91 526 学生33班级296 44 121 3 4 94 17 20 19 418 学生34班级297 48 68 82 39 16 24 79 79 532 学生35班级3126 69 40 13 48 34 81 5 97 513 学生36班级1144 24 18 71 58 21 12 95 45 488 学生37班级123 94 93 78 46 88 72 15 90 599 学生38班级273 103 45 17 69 18 3 67 55 450 学生39班级319 16 36 18 50 48 19 75 24 305 学生40班级16 44 50 73 58 21 84 49 68 453 学生41班级294 98 24 34 52 27 87 95 1 512 学生42班级227 68 60 75 93 4 38 44 27 436 学生43班级3102 146 138 72 58 19 34 57 60 686 学生44班级251 81 150 95 8 48 96 90 66 685 学生45班级193 37 109 84 100 59 90 59 81 712 学生46班级2125 60 32 70 93 65 74 44 77 640 学生47班级1139 45 52 54 6 64 46 45 66 517 学生48班级214 73 118 4 36 43 24 8 73 393 学生49班级345 114 114 6 65 94 32 30 1 501 学生50班级2112 77 19 33 30 32 90 18 77 488 学生51班级219 66 140 36 44 34 62 17 34 452 学生52班级261 98 107 78 2 17 54 28 89 534 学生53班级148 23 65 23 70 58 36 45 75 443 学生54班级181 9 46 37 86 87 83 39 63 531 学生55班级148 23 145 53 2 9 80 35 31 426 学生56班级1117 92 44 65 3 98 0 70 67 556 学生57班级3148 25 63 29 96 34 34 34 92 555 学生58班级151 22 97 58 80 16 19 91 20 454 学生59班级2118 1 20 62 26 93 77 66 34 497 学生60班级3129 19 109 78 33 15 74 67 58 582 学生61班级3112 68 65 15 79 63 97 72 85 656 学生62班级3117 14 73 6 6 98 3 81 2 400 学生63班级187 103 0 2 30 21 43 87 25 398 学生64班级265 79 49 53 86 33 57 99 83 604 学生65班级2144 7 122 47 11 76 64 66 71 608 学生66班级218 140 96 54 10 6 45 41 85 495 学生67班级230 14 70 20 44 25 77 97 20 397 学生68班级360 7 147 38 7 53 88 54 92 546 学生69班级286 115 23 90 52 50 89 79 42 626 学生70班级3132 25 21 25 44 86 58 61 3 455 学生71班级3149 102 68 98 96 7 95 25 47 687 学生72班级228 138 74 30 0 43 95 57 68 533 学生73班级354 148 81 40 86 23 91 73 95 691 学生74班级1143 39 76 5 55 90 31 18 95 552 学生75班级283 95 48 86 61 97 68 84 24 646 学生76班级1138 1 141 9 50 1 14 5 11 370 学生77班级325 33 46 25 62 93 41 43 75 443 学生78班级118 114 93 22 38 73 66 69 79 572 学生79班级384 10 72 94 30 95 32 41 56 514 学生80班级2113 39 10 23 28 33 32 7 23 308 学生81班级383 36 13 13 89 15 39 71 72 431 学生82班级352 68 39 22 16 9 75 37 95 413 学生83班级390 0 132 20 36 86 69 39 95 567 学生84班级161 89 67 10 33 31 99 34 4 428 学生85班级183 93 105 79 19 30 0 84 7 500 学生86班级188 143 19 56 9 56 36 89 77 573 学生87班级170 0 115 66 36 76 0 16 89 468 学生88班级317 60 49 80 12 99 30 8 1 356 学生89班级1129 128 48 76 47 46 46 89 1 610 学生90班级3143 14 86 1 69 55 85 3 43 499 学生91班级244 127 143 22 7 18 62 33 44 500 学生92班级137 41 130 71 17 61 68 1 19 445 学生93班级345 17 22 10 90 1 83 31 11 310 学生94班级219 40 99 59 77 1 90 9 68 462 学生95班级1126 19 68 91 53 68 23 87 85 620 学生96班级1131 126 126 53 13 18 70 85 33 655 学生97班级153 47 33 87 98 98 62 28 95 601 学生98班级1107 88 49 91 6 17 66 24 58 506 学生99班级1118 145 69 4 70 29 43 13 45 536 学生100班级248 8 115 63 93 53 91 59 93 623 

姓名班级成绩主科文科理科总分语文数学英语政治历史地理物理化学生物学生1班级364 104 150 93 32 82 26 44 83 678 学生2班级2120 66 150 85 5 50 72 32 90 670 学生3班级2133 61 49 97 67 13 64 8 60 552 学生4班级37 136 105 86 56 11 98 29 18 546 学生5班级2129 146 62 64 67 1 70 57 16 612 学生6班级245 29 51 91 9 2 37 3 26 293 学生7班级128 25 127 96 43 90 75 13 28 525 学生8班级378 64 20 29 70 92 100 69 30 552 学生9班级265 10 139 19 57 86 57 79 76 588 学生10班级2113 142 4 100 41 69 12 45 20 546 学生11班级341 84 42 23 89 88 6 4 21 398 学生12班级14 102 111 61 76 12 25 66 39 496 学生13班级249 144 56 75 18 58 39 13 88 540 学生14班级1119 81 73 53 37 88 79 69 30 629 学生15班级3120 78 86 58 50 7 20 42 24 485 学生16班级165 71 9 64 45 31 18 53 5 361 学生17班级172 139 24 20 39 49 19 21 23 406 学生18班级350 84 53 70 77 81 38 80 25 558 学生19班级156 147 134 59 57 31 48 86 7 625 学生20班级1103 38 96 100 21 88 36 37 18 537 学生21班级1133 150 28 37 96 88 12 36 87 667 学生22班级2140 59 42 95 94 50 3 58 63 604 学生23班级12 51 19 17 19 7 93 35 49 292 学生24班级367 2 91 23 22 37 79 52 63 436 学生25班级329 17 149 44 13 29 98 70 6 455 学生26班级3126 117 112 11 100 55 87 1 18 627 学生27班级3144 115 131 97 19 92 79 4 72 753 学生28班级2107 77 143 94 89 90 35 70 3 708 学生29班级314 33 44 78 5 67 27 49 23 340 学生30班级377 117 51 75 74 43 25 2 24 488 学生31班级176 140 148 50 100 33 83 81 23 734 学生32班级129 25 146 28 79 73 47 8 91 526 学生33班级296 44 121 3 4 94 17 20 19 418 学生34班级297 48 68 82 39 16 24 79 79 532 学生35班级3126 69 40 13 48 34 81 5 97 513 学生36班级1144 24 18 71 58 21 12 95 45 488 学生37班级123 94 93 78 46 88 72 15 90 599 学生38班级273 103 45 17 69 18 3 67 55 450 学生39班级319 16 36 18 50 48 19 75 24 305 学生40班级16 44 50 73 58 21 84 49 68 453 学生41班级294 98 24 34 52 27 87 95 1 512 学生42班级227 68 60 75 93 4 38 44 27 436 学生43班级3102 146 138 72 58 19 34 57 60 686 学生44班级251 81 150 95 8 48 96 90 66 685 学生45班级193 37 109 84 100 59 90 59 81 712 学生46班级2125 60 32 70 93 65 74 44 77 640 学生47班级1139 45 52 54 6 64 46 45 66 517 学生48班级214 73 118 4 36 43 24 8 73 393 学生49班级345 114 114 6 65 94 32 30 1 501 学生50班级2112 77 19 33 30 32 90 18 77 488 学生51班级219 66 140 36 44 34 62 17 34 452 学生52班级261 98 107 78 2 17 54 28 89 534 学生53班级148 23 65 23 70 58 36 45 75 443 学生54班级181 9 46 37 86 87 83 39 63 531 学生55班级148 23 145 53 2 9 80 35 31 426 学生56班级1117 92 44 65 3 98 0 70 67 556 学生57班级3148 25 63 29 96 34 34 34 92 555 学生58班级151 22 97 58 80 16 19 91 20 454 学生59班级2118 1 20 62 26 93 77 66 34 497 学生60班级3129 19 109 78 33 15 74 67 58 582 学生61班级3112 68 65 15 79 63 97 72 85 656 学生62班级3117 14 73 6 6 98 3 81 2 400 学生63班级187 103 0 2 30 21 43 87 25 398 学生64班级265 79 49 53 86 33 57 99 83 604 学生65班级2144 7 122 47 11 76 64 66 71 608 学生66班级218 140 96 54 10 6 45 41 85 495 学生67班级230 14 70 20 44 25 77 97 20 397 学生68班级360 7 147 38 7 53 88 54 92 546 学生69班级286 115 23 90 52 50 89 79 42 626 学生70班级3132 25 21 25 44 86 58 61 3 455 学生71班级3149 102 68 98 96 7 95 25 47 687 学生72班级228 138 74 30 0 43 95 57 68 533 学生73班级354 148 81 40 86 23 91 73 95 691 学生74班级1143 39 76 5 55 90 31 18 95 552 学生75班级283 95 48 86 61 97 68 84 24 646 学生76班级1138 1 141 9 50 1 14 5 11 370 学生77班级325 33 46 25 62 93 41 43 75 443 学生78班级118 114 93 22 38 73 66 69 79 572 学生79班级384 10 72 94 30 95 32 41 56 514 学生80班级2113 39 10 23 28 33 32 7 23 308 学生81班级383 36 13 13 89 15 39 71 72 431 学生82班级352 68 39 22 16 9 75 37 95 413 学生83班级390 0 132 20 36 86 69 39 95 567 学生84班级161 89 67 10 33 31 99 34 4 428 学生85班级183 93 105 79 19 30 0 84 7 500 学生86班级188 143 19 56 9 56 36 89 77 573 学生87班级170 0 115 66 36 76 0 16 89 468 学生88班级317 60 49 80 12 99 30 8 1 356 学生89班级1129 128 48 76 47 46 46 89 1 610 学生90班级3143 14 86 1 69 55 85 3 43 499 学生91班级244 127 143 22 7 18 62 33 44 500 学生92班级137 41 130 71 17 61 68 1 19 445 学生93班级345 17 22 10 90 1 83 31 11 310 学生94班级219 40 99 59 77 1 90 9 68 462 学生95班级1126 19 68 91 53 68 23 87 85 620 学生96班级1131 126 126 53 13 18 70 85 33 655 学生97班级153 47 33 87 98 98 62 28 95 601 学生98班级1107 88 49 91 6 17 66 24 58 506 学生99班级1118 145 69 4 70 29 43 13 45 536 学生100班级248 8 115 63 93 53 91 59 93 623 

姓名班级成绩主科文科理科总分语文数学英语政治历史地理物理化学生物学生1班级364 104 150 93 32 82 26 44 83 678 学生2班级2120 66 150 85 5 50 72 32 90 670 学生3班级2133 61 49 97 67 13 64 8 60 552 学生4班级37 136 105 86 56 11 98 29 18 546 学生5班级2129 146 62 64 67 1 70 57 16 612 学生6班级245 29 51 91 9 2 37 3 26 293 学生7班级128 25 127 96 43 90 75 13 28 525 学生8班级378 64 20 29 70 92 100 69 30 552 学生9班级265 10 139 19 57 86 57 79 76 588 学生10班级2113 142 4 100 41 69 12 45 20 546 学生11班级341 84 42 23 89 88 6 4 21 398 学生12班级14 102 111 61 76 12 25 66 39 496 学生13班级249 144 56 75 18 58 39 13 88 540 学生14班级1119 81 73 53 37 88 79 69 30 629 学生15班级3120 78 86 58 50 7 20 42 24 485 学生16班级165 71 9 64 45 31 18 53 5 361 学生17班级172 139 24 20 39 49 19 21 23 406 学生18班级350 84 53 70 77 81 38 80 25 558 学生19班级156 147 134 59 57 31 48 86 7 625 学生20班级1103 38 96 100 21 88 36 37 18 537 学生21班级1133 150 28 37 96 88 12 36 87 667 学生22班级2140 59 42 95 94 50 3 58 63 604 学生23班级12 51 19 17 19 7 93 35 49 292 学生24班级367 2 91 23 22 37 79 52 63 436 学生25班级329 17 149 44 13 29 98 70 6 455 学生26班级3126 117 112 11 100 55 87 1 18 627 学生27班级3144 115 131 97 19 92 79 4 72 753 学生28班级2107 77 143 94 89 90 35 70 3 708 学生29班级314 33 44 78 5 67 27 49 23 340 学生30班级377 117 51 75 74 43 25 2 24 488 学生31班级176 140 148 50 100 33 83 81 23 734 学生32班级129 25 146 28 79 73 47 8 91 526 学生33班级296 44 121 3 4 94 17 20 19 418 学生34班级297 48 68 82 39 16 24 79 79 532 学生35班级3126 69 40 13 48 34 81 5 97 513 学生36班级1144 24 18 71 58 21 12 95 45 488 学生37班级123 94 93 78 46 88 72 15 90 599 学生38班级273 103 45 17 69 18 3 67 55 450 学生39班级319 16 36 18 50 48 19 75 24 305 学生40班级16 44 50 73 58 21 84 49 68 453 学生41班级294 98 24 34 52 27 87 95 1 512 学生42班级227 68 60 75 93 4 38 44 27 436 学生43班级3102 146 138 72 58 19 34 57 60 686 学生44班级251 81 150 95 8 48 96 90 66 685 学生45班级193 37 109 84 100 59 90 59 81 712 学生46班级2125 60 32 70 93 65 74 44 77 640 学生47班级1139 45 52 54 6 64 46 45 66 517 学生48班级214 73 118 4 36 43 24 8 73 393 学生49班级345 114 114 6 65 94 32 30 1 501 学生50班级2112 77 19 33 30 32 90 18 77 488 学生51班级219 66 140 36 44 34 62 17 34 452 学生52班级261 98 107 78 2 17 54 28 89 534 学生53班级148 23 65 23 70 58 36 45 75 443 学生54班级181 9 46 37 86 87 83 39 63 531 学生55班级148 23 145 53 2 9 80 35 31 426 学生56班级1117 92 44 65 3 98 0 70 67 556 学生57班级3148 25 63 29 96 34 34 34 92 555 学生58班级151 22 97 58 80 16 19 91 20 454 学生59班级2118 1 20 62 26 93 77 66 34 497 学生60班级3129 19 109 78 33 15 74 67 58 582 学生61班级3112 68 65 15 79 63 97 72 85 656 学生62班级3117 14 73 6 6 98 3 81 2 400 学生63班级187 103 0 2 30 21 43 87 25 398 学生64班级265 79 49 53 86 33 57 99 83 604 学生65班级2144 7 122 47 11 76 64 66 71 608 学生66班级218 140 96 54 10 6 45 41 85 495 学生67班级230 14 70 20 44 25 77 97 20 397 学生68班级360 7 147 38 7 53 88 54 92 546 学生69班级286 115 23 90 52 50 89 79 42 626 学生70班级3132 25 21 25 44 86 58 61 3 455 学生71班级3149 102 68 98 96 7 95 25 47 687 学生72班级228 138 74 30 0 43 95 57 68 533 学生73班级354 148 81 40 86 23 91 73 95 691 学生74班级1143 39 76 5 55 90 31 18 95 552 学生75班级283 95 48 86 61 97 68 84 24 646 学生76班级1138 1 141 9 50 1 14 5 11 370 学生77班级325 33 46 25 62 93 41 43 75 443 学生78班级118 114 93 22 38 73 66 69 79 572 学生79班级384 10 72 94 30 95 32 41 56 514 学生80班级2113 39 10 23 28 33 32 7 23 308 学生81班级383 36 13 13 89 15 39 71 72 431 学生82班级352 68 39 22 16 9 75 37 95 413 学生83班级390 0 132 20 36 86 69 39 95 567 学生84班级161 89 67 10 33 31 99 34 4 428 学生85班级183 93 105 79 19 30 0 84 7 500 学生86班级188 143 19 56 9 56 36 89 77 573 学生87班级170 0 115 66 36 76 0 16 89 468 学生88班级317 60 49 80 12 99 30 8 1 356 学生89班级1129 128 48 76 47 46 46 89 1 610 学生90班级3143 14 86 1 69 55 85 3 43 499 学生91班级244 127 143 22 7 18 62 33 44 500 学生92班级137 41 130 71 17 61 68 1 19 445 学生93班级345 17 22 10 90 1 83 31 11 310 学生94班级219 40 99 59 77 1 90 9 68 462 学生95班级1126 19 68 91 53 68 23 87 85 620 学生96班级1131 126 126 53 13 18 70 85 33 655 学生97班级153 47 33 87 98 98 62 28 95 601 学生98班级1107 88 49 91 6 17 66 24 58 506 学生99班级1118 145 69 4 70 29 43 13 45 536 学生100班级248 8 115 63 93 53 91 59 93 623 

姓名班级成绩主科文科理科总分语文数学英语政治历史地理物理化学生物学生1班级364 104 150 93 32 82 26 44 83 678 学生2班级2120 66 150 85 5 50 72 32 90 670 学生3班级2133 61 49 97 67 13 64 8 60 552 学生4班级37 136 105 86 56 11 98 29 18 546 学生5班级2129 146 62 64 67 1 70 57 16 612 学生6班级245 29 51 91 9 2 37 3 26 293 学生7班级128 25 127 96 43 90 75 13 28 525 学生8班级378 64 20 29 70 92 100 69 30 552 学生9班级265 10 139 19 57 86 57 79 76 588 学生10班级2113 142 4 100 41 69 12 45 20 546 学生11班级341 84 42 23 89 88 6 4 21 398 学生12班级14 102 111 61 76 12 25 66 39 496 学生13班级249 144 56 75 18 58 39 13 88 540 学生14班级1119 81 73 53 37 88 79 69 30 629 学生15班级3120 78 86 58 50 7 20 42 24 485 学生16班级165 71 9 64 45 31 18 53 5 361 学生17班级172 139 24 20 39 49 19 21 23 406 学生18班级350 84 53 70 77 81 38 80 25 558 学生19班级156 147 134 59 57 31 48 86 7 625 学生20班级1103 38 96 100 21 88 36 37 18 537 学生21班级1133 150 28 37 96 88 12 36 87 667 学生22班级2140 59 42 95 94 50 3 58 63 604 学生23班级12 51 19 17 19 7 93 35 49 292 学生24班级367 2 91 23 22 37 79 52 63 436 学生25班级329 17 149 44 13 29 98 70 6 455 学生26班级3126 117 112 11 100 55 87 1 18 627 学生27班级3144 115 131 97 19 92 79 4 72 753 学生28班级2107 77 143 94 89 90 35 70 3 708 学生29班级314 33 44 78 5 67 27 49 23 340 学生30班级377 117 51 75 74 43 25 2 24 488 学生31班级176 140 148 50 100 33 83 81 23 734 学生32班级129 25 146 28 79 73 47 8 91 526 学生33班级296 44 121 3 4 94 17 20 19 418 学生34班级297 48 68 82 39 16 24 79 79 532 学生35班级3126 69 40 13 48 34 81 5 97 513 学生36班级1144 24 18 71 58 21 12 95 45 488 学生37班级123 94 93 78 46 88 72 15 90 599 学生38班级273 103 45 17 69 18 3 67 55 450 学生39班级319 16 36 18 50 48 19 75 24 305 学生40班级16 44 50 73 58 21 84 49 68 453 学生41班级294 98 24 34 52 27 87 95 1 512 学生42班级227 68 60 75 93 4 38 44 27 436 学生43班级3102 146 138 72 58 19 34 57 60 686 学生44班级251 81 150 95 8 48 96 90 66 685 学生45班级193 37 109 84 100 59 90 59 81 712 学生46班级2125 60 32 70 93 65 74 44 77 640 学生47班级1139 45 52 54 6 64 46 45 66 517 学生48班级214 73 118 4 36 43 24 8 73 393 学生49班级345 114 114 6 65 94 32 30 1 501 学生50班级2112 77 19 33 30 32 90 18 77 488 学生51班级219 66 140 36 44 34 62 17 34 452 学生52班级261 98 107 78 2 17 54 28 89 534 学生53班级148 23 65 23 70 58 36 45 75 443 学生54班级181 9 46 37 86 87 83 39 63 531 学生55班级148 23 145 53 2 9 80 35 31 426 学生56班级1117 92 44 65 3 98 0 70 67 556 学生57班级3148 25 63 29 96 34 34 34 92 555 学生58班级151 22 97 58 80 16 19 91 20 454 学生59班级2118 1 20 62 26 93 77 66 34 497 学生60班级3129 19 109 78 33 15 74 67 58 582 学生61班级3112 68 65 15 79 63 97 72 85 656 学生62班级3117 14 73 6 6 98 3 81 2 400 学生63班级187 103 0 2 30 21 43 87 25 398 学生64班级265 79 49 53 86 33 57 99 83 604 学生65班级2144 7 122 47 11 76 64 66 71 608 学生66班级218 140 96 54 10 6 45 41 85 495 学生67班级230 14 70 20 44 25 77 97 20 397 学生68班级360 7 147 38 7 53 88 54 92 546 学生69班级286 115 23 90 52 50 89 79 42 626 学生70班级3132 25 21 25 44 86 58 61 3 455 学生71班级3149 102 68 98 96 7 95 25 47 687 学生72班级228 138 74 30 0 43 95 57 68 533 学生73班级354 148 81 40 86 23 91 73 95 691 学生74班级1143 39 76 5 55 90 31 18 95 552 学生75班级283 95 48 86 61 97 68 84 24 646 学生76班级1138 1 141 9 50 1 14 5 11 370 学生77班级325 33 46 25 62 93 41 43 75 443 学生78班级118 114 93 22 38 73 66 69 79 572 学生79班级384 10 72 94 30 95 32 41 56 514 学生80班级2113 39 10 23 28 33 32 7 23 308 学生81班级383 36 13 13 89 15 39 71 72 431 学生82班级352 68 39 22 16 9 75 37 95 413 学生83班级390 0 132 20 36 86 69 39 95 567 学生84班级161 89 67 10 33 31 99 34 4 428 学生85班级183 93 105 79 19 30 0 84 7 500 学生86班级188 143 19 56 9 56 36 89 77 573 学生87班级170 0 115 66 36 76 0 16 89 468 学生88班级317 60 49 80 12 99 30 8 1 356 学生89班级1129 128 48 76 47 46 46 89 1 610 学生90班级3143 14 86 1 69 55 85 3 43 499 学生91班级244 127 143 22 7 18 62 33 44 500 学生92班级137 41 130 71 17 61 68 1 19 445 学生93班级345 17 22 10 90 1 83 31 11 310 学生94班级219 40 99 59 77 1 90 9 68 462 学生95班级1126 19 68 91 53 68 23 87 85 620 学生96班级1131 126 126 53 13 18 70 85 33 655 学生97班级153 47 33 87 98 98 62 28 95 601 学生98班级1107 88 49 91 6 17 66 24 58 506 学生99班级1118 145 69 4 70 29 43 13 45 536 学生100班级248 8 115 63 93 53 91 59 93 623 

二、整体的框架

1、最下面的是原始的Table。

2、用左边的table覆盖在上层，命名为tableColumn。

3、用上部的table覆盖在更上层，命名为tableHead。

4、在左上角覆盖固定不动的table，命名为tableFix。

自然在各自的外层都要用div框起来，以便后面的浮动和覆盖等等，所以结构的html如下：

<div id="MyTable_tableLayout"> <div id="MyTable_tableFix"> <table id="MyTable_tableFixClone" border="1" cellspacing="0" cellpadding="0"></table> </div> <div id="MyTable_tableHead"><table id="MyTable_tableHeadClone" border="1" cellspacing="0" cellpadding="0"></table> </div> <div id="MyTable_tableColumn"> <table id="MyTable_tableColumnClone" border="1" cellspacing="0" cellpadding="0"></table> </div><div id="MyTable_tableData"> <table id="MyTable" border="1" cellspacing="0" cellpadding="0"></table> </div> </div>

三、代码实现

整体框架结构出来后，下面要做的就是确定每个区域的高度，宽度，定位就算完成了。

首先确定下调用接口，调用时已经有table了，我们希望很简单的一行js即可高定，就用了一个方法实现。由于使用项目中table线宽全部都是1，所以未考虑其他线宽问题。

function FixTable(TableID, FixColumnNumber, width, height)

第一个参数：table的ID，第二个参数：要锁定的列数目，第三个参数：显示的宽度，第四个参数：显示的高度。

（一）首先创建上面所诉的框架出来：

if ($("#" + TableID + "_tableLayout").length != 0) { $("#" + TableID + "_tableLayout").before($("#" + TableID)); $("#" + TableID + "_tableLayout").empty(); } else { $("#" + TableID).after("<div id='" + TableID +"_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); } $('<div id="' + TableID + '_tableFix"></div>' + '<div id="' + TableID + '_tableHead"></div>' + '<div id="' + TableID +'_tableColumn"></div>' + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout"); var oldtable = $("#" + TableID); var tableFixClone = oldtable.clone(true); tableFixClone.attr("id", TableID +"_tableFixClone"); $("#" + TableID + "_tableFix").append(tableFixClone); var tableHeadClone = oldtable.clone(true); tableHeadClone.attr("id", TableID + "_tableHeadClone"); $("#" + TableID +"_tableHead").append(tableHeadClone); var tableColumnClone = oldtable.clone(true); tableColumnClone.attr("id", TableID + "_tableColumnClone"); $("#" + TableID + "_tableColumn").append(tableColumnClone); $("#" + TableID +"_tableData").append(oldtable); $("#" + TableID + "_tableLayout table").each(function () { $(this).css("margin", "0"); });

（二）计算tableFix，tableHead的高度：

var HeadHeight = $("#" + TableID + "_tableHead thead").height(); HeadHeight += 2; $("#" + TableID + "_tableHead").css("height", HeadHeight); $("#" + TableID + "_tableFix").css("height", HeadHeight);

（三）计算tableFix，tableColumn的宽度：

var ColumnsWidth = 0; var ColumnsNumber = 0; $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () { ColumnsWidth += $(this).outerWidth(true); ColumnsNumber++; }); ColumnsWidth += 2; if($.browser.msie) { switch ($.browser.version) { case "7.0": if (ColumnsNumber >= 3) ColumnsWidth--; break; case "8.0": if (ColumnsNumber >= 2) ColumnsWidth--; break; } } $("#" + TableID + "_tableColumn").css("width", ColumnsWidth); $("#" + TableID + "_tableFix").css("width", ColumnsWidth);

（四）为tableHead和tableColumn添加联动的滚动条事件：

$("#" + TableID + "_tableData").scroll(function () { $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID +"_tableData").scrollTop()); });

（五）为较小的table修正样式：

if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableHead table").width()) { $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableHead table").width()); $("#" + TableID +"_tableData").css("width", $("#" + TableID + "_tableHead table").width() + 17); } if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { $("#" + TableID +"_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17); }

（六）为整体添加样式，定位：

$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" }); $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17,"position": "relative", "z-index": "45", "background-color": "Silver" }); $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color":"Silver" }); $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" }); $("#" + TableID + "_tableFix").offset($("#" + TableID +"_tableLayout").offset()); $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID +"_tableData").offset($("#" + TableID + "_tableLayout").offset());

完整代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

function FixTable(TableID, FixColumnNumber, width, height) {

    /// <summary>

    ///     锁定表头和列

    ///     <para> sorex.cnblogs.com </para>

    /// </summary>

    /// <param name="TableID" type="String">

    ///     要锁定的Table的ID

    /// </param>

    /// <param name="FixColumnNumber" type="Number">

    ///     要锁定列的个数

    /// </param>

    /// <param name="width" type="Number">

    ///     显示的宽度

    /// </param>

    /// <param name="height" type="Number">

    ///     显示的高度

    /// </param>

    if ($("#" + TableID + "_tableLayout").length != 0) {

        $("#" + TableID + "_tableLayout").before($("#" + TableID));

        $("#" + TableID + "_tableLayout").empty();

    }

    else {

        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");

    }

 

    $('<div id="' + TableID + '_tableFix"></div>'

    +'<div id="' + TableID + '_tableHead"></div>'

    +'<div id="' + TableID + '_tableColumn"></div>'

    +'<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");

 

 

    var oldtable = $("#" + TableID);

 

    var tableFixClone = oldtable.clone(true);

    tableFixClone.attr("id", TableID + "_tableFixClone");

    $("#" + TableID + "_tableFix").append(tableFixClone);

    var tableHeadClone = oldtable.clone(true);

    tableHeadClone.attr("id", TableID + "_tableHeadClone");

    $("#" + TableID + "_tableHead").append(tableHeadClone);

    var tableColumnClone = oldtable.clone(true);

    tableColumnClone.attr("id", TableID + "_tableColumnClone");

    $("#" + TableID + "_tableColumn").append(tableColumnClone);

    $("#" + TableID + "_tableData").append(oldtable);

 

    $("#" + TableID + "_tableLayout table").each(function () {

        $(this).css("margin","0");

    });

 

 

    var HeadHeight = $("#" + TableID + "_tableHead thead").height();

    HeadHeight += 2;

    $("#" + TableID + "_tableHead").css("height", HeadHeight);

    $("#" + TableID + "_tableFix").css("height", HeadHeight);

 

 

    var ColumnsWidth = 0;

    var ColumnsNumber = 0;

    $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {

        ColumnsWidth += $(this).outerWidth(true);

        ColumnsNumber++;

    });

    ColumnsWidth += 2;

    if ($.browser.msie) {

        switch ($.browser.version) {

            case "7.0":

                if (ColumnsNumber >= 3) ColumnsWidth--;

                break;

            case "8.0":

                if (ColumnsNumber >= 2) ColumnsWidth--;

                break;

        }

    }

    $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);

    $("#" + TableID + "_tableFix").css("width", ColumnsWidth);

 

 

    $("#" + TableID + "_tableData").scroll(function () {

        $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());

        $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());

    });

 

    $("#" + TableID + "_tableFix").css({"overflow":"hidden","position":"relative","z-index":"50","background-color":"Silver" });

    $("#" + TableID + "_tableHead").css({"overflow":"hidden","width": width - 17, "position":"relative","z-index":"45","background-color":"Silver" });

    $("#" + TableID + "_tableColumn").css({"overflow":"hidden","height": height - 17, "position":"relative","z-index":"40","background-color":"Silver" });

    $("#" + TableID + "_tableData").css({"overflow":"scroll","width": width, "height": height, "position":"relative","z-index":"35" });

 

    if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {

        $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());

        $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);

    }

    if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {

        $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());

        $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);

    }

 

    $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());

    $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());

    $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());

    $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

}