html css 如何將表頭固定

    position屬性取值為fixed時，則元素的位置將不受滾動條的影響，而是直接依據視窗定位，這就是將表頭固定的最直接方法，網上其他途徑感覺都是在走彎路。但是與此同時必須解決兩個問題。第一：表體將隨之不依據表頭定位，而是依據body元素定位，因此表體將上移，導致表體靠上部分被表頭遮擋,而且有重影。第二：表體的寬高和表頭的寬高也將互相獨立不再受文件流的約束，這導致單元格對不齊。 
    解決辦法示例如下。其中，單元格上下對齊的問題可以通過設定padding margin 百分比width來解決，表頭和表體也可以放在各自的div裡。 
樣式單 
<style type="text/css"> 
        *{ 
           padding:0px;  
           margin: 0px;  
        } 
        #thead { 
          /*固定表頭*/ 
        position:fixed; 
         /* 表頭顯示層次高於表體，防止空白行和表頭重合時出現重影*/ 
                z-index:2; 
        background:#ECECFF; 
        } 
        #spacetr{  /* 空白的tr 用來填補表頭遮蓋的資料*/ 
        position:relative; 
        z-index:1; 
        } 
        .tdata { /* 顯示錶格資料的tr */ 
        position:relative; 
        z-index:1; 
        } 
    </style> 

  js指令碼 
   $(function(){ 
$("#spacetr").css("height",$("#thead").css("height")); 
//將空白行的高度設定為和表頭等高,使被遮擋的資料剛好下移表頭高度的距離 
   }); 

jsp程式碼： 

   <div style="width:100%"> 
<%--<img src="${pageContext.request.contextPath}/images/post_head.jpg"/>  --%> 
       <table id="table" border="1px gray solid "  cellspacing="0" cellpadding="0" width="100%;" > 
   <tr id="thead"> 
   <td width="9%" align="center">招聘學科</td> 
   <c:forEach items="${postnames}" var="postname"> 
   <td valign="bottom" align="center"> 
   ${postname} 
   </td> 
   </c:forEach> 
   </tr> 
   <tr id="spacetr"> 
   <td width="9%"></td> 
   <c:forEach items="${postnames}" var="postname"> 
   <td> 
   </td> 
   </c:forEach> 
   </tr> 
   <c:forEach items="${shcoolsPostnumbers}" var="schoolPostnumbers"> 
   <tr class="tdata"> 
   <td width="9%" >${schoolPostnumbers.key}</td> 
   <c:forEach items="${schoolPostnumbers.value}" var="postnumber"> 
   <td align="center"> ${postnumber} </td> 
   </c:forEach> 
   </tr> 
   </c:forEach> 
</table> 
    </div>