table表头固定 ,兼容IE.Firefox,google,360等等

table表头固定 ,兼容IE.Firefox,google,360等等

 

table表头固定 ,兼容IE.Firefox,google,360等等_第1张图片

 

 

[html]   view plain copy print ? 在CODE上查看代码片
  1. <span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  5. <title>固定表头</title>  
  6. <style>  
  7. body{ overflow:hidden;}/*让body不出现滚动条*/  
  8. table {  
  9.     background-color: #FFFFFF;  
  10.     border-collapse: collapse;  
  11.     border-left: 1px solid #000;  
  12.     border-spacing: 1px;  
  13.     border-top: 1px solid #000;  
  14.     margin: 0;  
  15.     width:2000px;/*整个表格宽度,可以不填,不填默认100%;*/  
  16. }  
  17. .pp-list {  
  18.     background: none repeat scroll 0 0 #8F8F9A;  
  19.     border-spacing: 1px;  
  20.     margin: 0;  
  21.     overflow: hidden;  
  22. }  
  23. .pp-list td, .pp-list th {  
  24.     border-bottom: 1px solid #000;  
  25.     border-right: 1px solid #000;  
  26.     text-align: center;  
  27. }  
  28. .t_table {  
  29.     overflow: auto;/*让内容表格外面的div自动有滚动条*/  
  30.     max-height: 353px;  
  31. }  
  32. </style>  
  33. </head>  
  34. <body>  
  35.   
  36. <table  class="pp-list" id="table_head">  
  37. <thead>  
  38.         <tr>  
  39.             <th class="ckTh"><input type="checkbox"></th>  
  40.             <th width="55"><span column="serialId" class="trade-sort">工单流水</span></th>  
  41.             <th width="55"><span column="status" class="trade-sort">订单状态</span></th>  
  42.             <th width="50">收货人</th>  
  43.             <th>收货地址</th>  
  44.             <th>联系电话</th>  
  45.             <th>买家留言</th>  
  46.             <th>卖家留言</th>  
  47.             <th width="90"><span column="sellTime" class="trade-sort">拍单日期</span></th>  
  48.             <th width="90"><span column="payTime" class="trade-sort">付款时间</span></th>  
  49.         </tr>  
  50. </thead>  
  51. </table>  
  52.   
  53. <div class="t_table">  
  54. <table class="pp-list">  
  55.         <tbody>  
  56.         <tr style="display: none; background: none repeat scroll 0% 0% rgb(255, 255, 255);" id="tradesHeader"></tr>  
  57.           
  58.               
  59.               
  60.             <tr onclick="findTrade(1)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  61.               
  62.                   
  63.                 <td class="ckTd"><input type="checkbox" value="1" name="tradeCheckBox"></td>  
  64.                 <td>10112062753**</td>  
  65.                 <td>成功 </td>    
  66.                 <td>杨*  </td>  
  67.                 <td>福建省     
  68.                     厦门市    
  69.                     思明区   
  70.                     厦门大学学生公寓** </td>  
  71.                 <td>15260****** </td>     
  72.                 <td> </td>      
  73.                 <td> </td>  
  74.                 <td>12-06-24 13:37</td>  
  75.                 <td>12-06-24 13:37</td>   
  76.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  77.             </tr>  
  78.           
  79.               
  80.               
  81.             <tr onclick="findTrade(2)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  82.               
  83.                   
  84.                 <td class="ckTd"><input type="checkbox" value="2" name="tradeCheckBox"></td>  
  85.                 <td>10112062753**</td>  
  86.                 <td>等待用户确认收货 </td>    
  87.                 <td>孔**  </td>  
  88.                 <td>四川省     
  89.                     成都市    
  90.                     温江区   
  91.                     文化路251号观澜半岛******* </td>  
  92.                 <td>13880****** </td>     
  93.                 <td> </td>      
  94.                 <td> </td>  
  95.                 <td>12-06-25 21:56</td>  
  96.                 <td>12-06-25 21:57</td>   
  97.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  98.             </tr>  
  99.           
  100.               
  101.               
  102.             <tr onclick="findTrade(3)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  103.               
  104.                   
  105.                 <td class="ckTd"><input type="checkbox" value="3" name="tradeCheckBox"></td>  
  106.                 <td>10112062753**</td>  
  107.                 <td>成功 </td>    
  108.                 <td>刘*  </td>  
  109.                 <td>山东省     
  110.                     潍坊市    
  111.                     奎文区   
  112.                     玉清街北海路交叉口******** </td>  
  113.                 <td>15094****** </td>     
  114.                 <td> </td>      
  115.                 <td> </td>  
  116.                 <td>12-06-23 18:11</td>  
  117.                 <td>12-06-23 18:12</td>   
  118.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  119.             </tr>  
  120.           
  121.               
  122.             <tr class="red_class" onclick="findTrade(4)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  123.               
  124.               
  125.                   
  126.                 <td class="ckTd"><input type="checkbox" value="4" name="tradeCheckBox"></td>  
  127.                 <td>10112062753**</td>  
  128.                 <td>发货处理中 </td>    
  129.                 <td>马**  </td>  
  130.                 <td>江苏     
  131.                     无锡    
  132.                     宜兴市   
  133.                     宜兴市宜城街道东山西路******** </td>  
  134.                 <td> </td>     
  135.                 <td>我要一件粉色,一件米色,一件白色 </td>      
  136.                 <td> </td>  
  137.                 <td>12-06-27 08:27</td>  
  138.                 <td>12-06-27 08:29</td>   
  139.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  140.             </tr>  
  141.           
  142.               
  143.             <tr class="red_class" onclick="findTrade(5)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  144.               
  145.               
  146.                   
  147.                 <td class="ckTd"><input type="checkbox" value="5" name="tradeCheckBox"></td>  
  148.                 <td>10112062753**</td>  
  149.                 <td>成功 </td>    
  150.                 <td>李**  </td>  
  151.                 <td>北京     
  152.                     北京市    
  153.                     海淀区   
  154.                     北京海淀区太平路*****—1—801 </td>  
  155.                 <td>18210****** </td>     
  156.                 <td> </td>      
  157.                 <td>买三送一 每个颜色发一件 路丸   6.18 </td>  
  158.                 <td>12-06-18 20:19</td>  
  159.                 <td>12-06-19 09:41</td>   
  160.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  161.             </tr>  
  162.           
  163.               
  164.               
  165.             <tr onclick="findTrade(6)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  166.               
  167.                   
  168.                 <td class="ckTd"><input type="checkbox" value="6" name="tradeCheckBox"></td>  
  169.                 <td>10112062753**</td>  
  170.                 <td>成功 </td>    
  171.                 <td>谢**  </td>  
  172.                 <td>湖南省     
  173.                     益阳市    
  174.                     南县   
  175.                     大通湖河口******* </td>  
  176.                 <td>13762****** </td>     
  177.                 <td> </td>      
  178.                 <td> </td>  
  179.                 <td>12-06-13 00:45</td>  
  180.                 <td>12-06-13 11:19</td>   
  181.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  182.             </tr>  
  183.           
  184.               
  185.             <tr class="red_class" onclick="findTrade(7)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  186.               
  187.               
  188.                   
  189.                 <td class="ckTd"><input type="checkbox" value="7" name="tradeCheckBox"></td>  
  190.                 <td>1011206275335</td>  
  191.                 <td>成功 </td>    
  192.                 <td>谢**  </td>  
  193.                 <td>湖南省     
  194.                     益阳市    
  195.                     南县   
  196.                     大通湖河口******** </td>  
  197.                 <td>13762****** </td>     
  198.                 <td> </td>      
  199.                 <td>尺码还是这个   买二送一的  两件杏色的一件黑色的  路丸   6.13 </td>  
  200.                 <td>12-06-13 00:48</td>  
  201.                 <td>12-06-13 00:48</td>   
  202.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  203.             </tr>  
  204.           
  205.               
  206.               
  207.             <tr onclick="findTrade(8)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  208.               
  209.                   
  210.                 <td class="ckTd"><input type="checkbox" value="8" name="tradeCheckBox"></td>  
  211.                 <td>10112062753**</td>  
  212.                 <td>成功 </td>    
  213.                 <td>谢**  </td>  
  214.                 <td>湖南省     
  215.                     益阳市    
  216.                     南县   
  217.                     大通湖河口******* </td>  
  218.                 <td>13762****** </td>     
  219.                 <td> </td>      
  220.                 <td> </td>  
  221.                 <td>12-06-13 11:18</td>  
  222.                 <td>12-06-13 11:22</td>   
  223.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  224.             </tr>  
  225.           
  226.               
  227.               
  228.             <tr onclick="findTrade(9)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  229.               
  230.                   
  231.                 <td class="ckTd"><input type="checkbox" value="9" name="tradeCheckBox"></td>  
  232.                 <td>1011206275337</td>  
  233.                 <td>关闭 </td>    
  234.                 <td>蒋*  </td>  
  235.                 <td>上海     
  236.                     上海市    
  237.                     浦东新区   
  238.                     ******* </td>  
  239.                 <td>13816****** </td>     
  240.                 <td> </td>      
  241.                 <td> </td>  
  242.                 <td>12-06-27 10:10</td>  
  243.                 <td>12-06-27 10:12</td>   
  244.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  245.             </tr>  
  246.   
  247.             <tr onclick="findTrade(10)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  248.               
  249.                   
  250.                 <td class="ckTd"><input type="checkbox" value="10" name="tradeCheckBox"></td>  
  251.                 <td>1011206275338</td>  
  252.                 <td>成功 </td>    
  253.                 <td>陈*  </td>  
  254.                 <td>山东省     
  255.                     东营市    
  256.                     河口区   
  257.                     山东省 东营市 河口区***** </td>  
  258.                 <td>18754****** </td>     
  259.                 <td> </td>      
  260.                 <td> </td>  
  261.                 <td>12-06-20 13:20</td>  
  262.                 <td>12-06-20 13:24</td>   
  263.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  264.             </tr>  
  265.           
  266.               
  267.             <tr class="red_class" onclick="findTrade(11)" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">  
  268.               
  269.               
  270.                   
  271.                 <td class="ckTd"><input type="checkbox" value="11" name="tradeCheckBox"></td>  
  272.                 <td>10112062753**</td>  
  273.                 <td>成功 </td>    
  274.                 <td>缪**  </td>  
  275.                 <td>上海     
  276.                     上海市    
  277.                     普陀区   
  278.                     桃浦路300弄******* </td>  
  279.                 <td>18017****** </td>     
  280.                 <td>束胸三送一的话最好别送大红色的哟,能送米色的最好。嘻嘻  
  281. 希望明天能发货 </td>      
  282.                 <td> </td>  
  283.                 <td>12-06-23 02:32</td>  
  284.                 <td>12-06-23 02:34</td>   
  285.                 <td style="display:none"><input type="text" value="NORMAL" class="abnormalTypeText"></td>  
  286.             </tr>  
  287.   
  288.     </tbody>            
  289.     </table>  
  290. </div>  
  291. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  292. <script>  
  293. //利用js让头部与内容对应列宽度一致。  
  294. function fix(){  
  295.   for(var i=0;i<=$('.t_table .pp-list tr:last').find('td:last').index();i++){  
  296.   $('th').eq(i).css('width',$('.t_table .pp-list tr:last').find('td').eq(i).width());  
  297.   }  
  298. }  
  299. window.load=fix();  
  300. $(window).resize(function(){  
  301.   return fix();  
  302. });  
  303.   
  304. //当有横向滚动条时,需要此js,时内容滚动头部也能滚动。  
  305. $('.t_table').scroll(function(){  
  306.   $('#table_head').css('margin-left',-($('.t_table').scrollLeft()));  
  307. });  
  308. </script>  
  309. </body>  
  310. </html></span>  

 

你可能感兴趣的:(firefox)