time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > html固定表头列头实例

html固定表头列头实例

时间:2012-11-14 22:45 点击:3514次 字体:[ ]




 下面介绍一种行列固定的方法。

下面这种方法有点是简单并且行列固定效果很好(IE6+有效,Chrome不支持,FF未测)

缺点则是数据量稍大的时候会比较卡,如果有上万条数据的话,滚轮滚动都不流畅(也许PC配置好的话能差一些)

注意事项:

不要将div的宽度或高度设置的比固定列的宽度或高度要小,否则是永远也看不到滚动的内容的。

 

  1. <head> 
  2.  
  3.     <style> 
  4.  
  5.         .FixedTitleRow 
  6.  
  7.         { 
  8.  
  9.             position: relative; 
  10.  
  11.             top: expression(this.offsetParent.scrollTop); 
  12.  
  13.             z-index: 10; 
  14.  
  15.             background-color: #E6ECF0; 
  16.  
  17.         } 
  18.  
  19.         
  20.  
  21.         .FixedTitleColumn 
  22.  
  23.         { 
  24.  
  25.             position: relative; 
  26.  
  27.             left: expression(this.parentElement.offsetParent.scrollLeft); 
  28.  
  29.         } 
  30.  
  31.         
  32.  
  33.         .FixedDataColumn 
  34.  
  35.         { 
  36.  
  37.             position: relative; 
  38.  
  39.             left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); 
  40.  
  41.             background-color: #E6ECF0; 
  42.  
  43.         } 
  44.  
  45.     </style> 
  46.  
  47. </head> 
  48.  
  49. <body> 
  50.  
  51.    <div id="scrollDiv" style="width: 200px; overflow: auto;display: inline;position: absolute; height: 200px;"> 
  52.  
  53.         <table id='accountTable' width='350' height='230' cellpadding='0' cellspacing='0' border='1' 
  54.  
  55.             style='table-layout: auto' bordercolor='lightgrey'> 
  56.  
  57.                 <tr class="FixedTitleRow"> 
  58.  
  59.                     <td class="FixedTitleColumn"> ID0</td> 
  60.  
  61.                     <td>XS0</td> 
  62.  
  63.                     <td >SS0</td> 
  64.  
  65.                     <td>MS0</td> 
  66.  
  67.                     <td>DS0</td> 
  68.  
  69.                     <td>BS0</td> 
  70.  
  71.                 </tr> 
  72.  
  73.                 <tr> 
  74.  
  75.                     <td class="FixedDataColumn">88</td> 
  76.  
  77.                     <td>22</td> 
  78.  
  79.                     <td>22</td> 
  80.  
  81.                     <td>22</td> 
  82.  
  83.                     <td>22</td> 
  84.  
  85.                     <td>22</td> 
  86.  
  87.                 </tr> 
  88.  
  89.                 <tr> 
  90.  
  91.                     <td class="FixedDataColumn"> 111</td> 
  92.  
  93.                     <td>006</td> 
  94.  
  95.                     <td>007</td> 
  96.  
  97.                     <td>008</td> 
  98.  
  99.                     <td>009</td> 
  100.  
  101.                     <td>010</td> 
  102.  
  103.                 </tr> 
  104.  
  105.                 <tr> 
  106.  
  107.                     <td class="FixedDataColumn"> 111</td> 
  108.  
  109.                     <td>006</td> 
  110.  
  111.                     <td>007</td> 
  112.  
  113.                     <td>008</td> 
  114.  
  115.                     <td>009</td> 
  116.  
  117.                     <td>010</td> 
  118.  
  119.                 </tr> 
  120.  
  121.         </table> 
  122.  
  123.     </div> 
  124.  
  125. </body> 
  126.  
  127. </html> 

 



本文地址 : http://www.fengfly.com/plus/view-210262-1.html
标签: 实例 固定 html 表头 列头
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: