html实现表头列头固定方法

发布时间:2019-09-22编辑:脚本学堂
如何通过html代码实现行列固定的?我把本文的例子给大家分享一下,希望能给您带来帮助。

下面的方法有点是简单并且行列固定效果很好(IE6+有效,Chrome不支持,FF未测)
缺点是数据量稍大的时候会比较卡。
注意:
不能将div的宽度或高度设置的比固定列的宽度或高度要小,否则是永远也看不到滚动的内容的。
 

复制代码 代码示例:

<html>
<head>
   <style>
         .FixedTitleRow{ position: relative;top: expression(this.offsetParent.scrollTop);  z-index: 10; background-color: #E6ECF0;}
         .FixedTitleColumn {  position: relative; left: expression(this.parentElement.offsetParent.scrollLeft);  }
         .FixedDataColumn { position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); background-color: #E6ECF0;}
   </style>
</head>
<body>
   <div id="scrollDiv" style="width: 200px; overflow: auto;display: inline;position: absolute; height: 200px;">
   <table id='accountTable' width='350' height='230' cellpadding='0' cellspacing='0' border='1' style='table-layout: auto' bordercolor='lightgrey'>
   <tr class="FixedTitleRow">
     <td class="FixedTitleColumn">ID0</td>
     <td>XS0</td>
     <td >SS0</td>
     <td>MS0</td>
     <td>DS0</td>
     <td>BS0</td>
   </tr>
   <tr>
      <td class="FixedDataColumn">88</td>
      <td>22</td>
      <td>22</td>
      <td>22</td>
      <td>22</td>
      <td>22</td>
    </tr>
    <tr>
       <td class="FixedDataColumn"> 111</td>
       <td>006</td>
       <td>007</td>
       <td>008</td>
       <td>009</td>
       <td>010</td>
    </tr>
    <tr>
       <td class="FixedDataColumn"> 111</td>
       <td>006</td>
       <td>007</td>
       <td>008</td>
       <td>009</td>
       <td>010</td>
       </tr>
    </table>
  </div>
 </body>
</html>