首页 > 代码库 > table表头固定（原创）

table表头固定（原创）

2024-08-22 12:26:04   220人阅读

　　在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>

 

table表头固定（原创）


联系
我们