table表头固定（原创）
Posted 华灯初上
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table表头固定（原创）相关的知识，希望对你有一定的参考价值。
在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表头固定（原创）的主要内容，如果未能解决你的问题，请参考以下文章