table固定表头

  <style type="text/css">
      .header{
           background-color:#d9e7f8;
           top:expression(document.getElementById("diva").scrollTop-1);
           position:relative;
           border: 1px solid #000000;
           } 
    </style>

 

 top:expression(document.getElementById("diva").scrollTop-1);

1。top:　说的是距离顶部距离，好比相对于屏幕，框架，层等对象。应该是样式设置。
2。expression()是　一个函数，不晓得它是咋样具体实现的，反正最后返归一个数值。
总的来说，这句代码的意思是动态设置一个对象的位置

 

 

 <div id="diva" style="height:63%;overflow-y:scroll;width:100%;">
                <table  cellspacing="0" cellpadding="0" border="1"  class="table_list03" width="100%" id="tab2"  style="margin-left:5px;margin-top: 0px;word-break:break-all; word-wrap:break-all;">
                    <tr height="80%">
                            <td class="header" style="text-align: left;" width="1%" >ID</td>
                            <td class="header" style="text-align: left;" width="2%" >ID</td>
                            <td class="header" style="text-align: left;" width="2%" >ID</td>
                            <td class="header" style="text-align: left;" width="2%" >ID</td>
                            <td class="header" style="text-align: left;" width="2%" >ID</td>
                            <td class="header" style="text-align: left;" width="3%" >ID</td>
                </tr>
                    <g:each in="${resultList}" status="i" var="resultList">
                        <tr  >
                              <td style="text-align: left;">${resultList[0]}</td>
                              <td style="text-align: left;">${resultList[1]}</td>
                              <td style="text-align: left;">${resultList[2]}</td>
                               <td style="text-align: left;">${resultList[3]}</td>
                              <td style="text-align: left;">${resultList[4]}</td>
                               <td style="text-align: left;">${resultList[5]}</td>>
                       </tr>
                    </g:each>
                </table>
                </div>