在tableli经常会遇到像nav导航样的需求，那就是tbody里面的内容可以呀滚动但是要求thead要一直显示在table上方。
这里我写了个简单的插件，无论table多大，位置在哪，都可以使thead固定在table上方；使用的原理是clone一个thead出来，再使用定位，使克隆的元素定位在table上方。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
9 <style type="text/css">
10 *{margin: 0;padding: 0;}
11 #box{position: relative;}
12 #box1{position: relative;left: 50px;top: 200px;}
13 table{display: inline-block;overflow-y: scroll;border:solid 1px #ddd;position: absolute;left: 50px;top: 20px;}
14 thead,tbody,tr{display: inline-block;width: 100%;}
15 thead{background: #f5f5d5;height: 36px;line-height: 36px;}
16 th,td{display: inline-block;text-align: center;border-top:solid 1px #ccc;width: 33%;box-sizing: border-box;}
17 th{border:none;}
18 .cloneHead{border:none;background:#999;color:#fff;}
19 </style>
20 <div id="box">
21 <table id="table" width="300" height="150">
22 <thead>
23 <tr><th>a</th><th>b</th><th>c</th></tr>
24 </thead>
25 <tbody>
26 <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
27 <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
28 <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
29 <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
30 <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
31 <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
32 <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
33 <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
34 <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
35 <tr><td>10.1</td><td>10.2</td><td>10.3</td></tr>
36 <tr><td>11.1</td><td>11.2</td><td>11.3</td></tr>
37 <tr><td>12.1</td><td>12.2</td><td>12.3</td></tr>
38 <tr><td>13.1</td><td>13.2</td><td>13.3</td></tr>
39 <tr><td>14.1</td><td>14.2</td><td>14.3</td></tr>
40 </tbody>
41 </table>
42 </div>
43 <div id="box1">
44 <table id="table1" width="150" height="200">
45 <thead>
46 <tr><th>W</th><th>A</th><th>L</th></tr>
47 </thead>
48 <tbody>
49 <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
50 <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
51 <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
52 <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
53 <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
54 <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
55 <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
56 <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
57 <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
58 <tr><td>10.1</td><td>10.2</td><td>10.3</td></tr>
59 <tr><td>11.1</td><td>11.2</td><td>11.3</td></tr>
60 <tr><td>12.1</td><td>12.2</td><td>12.3</td></tr>
61 <tr><td>13.1</td><td>13.2</td><td>13.3</td></tr>
62 <tr><td>14.1</td><td>14.2</td><td>14.3</td></tr>
63 </tbody>
64 </table>
65 </div>
66 <script type="text/javascript">
67 $.fn.scrollHead = function (father) {
68 var head = $(this).find("thead").clone();
69 this.scroll(function () {
70 if(this.scrollTop > 0){
71 $("#"+father).append(head[0]);
72 head[0].className = "cloneHead";
73 head[0].style.cssText = "position:absolute;left:"+$(this).css("left")+";top:"+$(this).css("top")+";z-index:2;width:"+
74 $(this).find("thead").width()+"px;"
75 }else{
76 $(head[0]).remove()
77 }
78 })
79 }
80 $("#table").scrollHead("box")
81 $("#table1").scrollHead("box1")
82 </script>
83
84 </body>
85 </html>
时间： 2024-08-09 06:46:49