thead位置在IE7中绝对不起作用

Question

我尝试在页面上滑动时修正表头。问题出在IE7中，thead不是绝对的，而是显示在“正确”的位置上。它需要飞过桌子。它完美的作品在Firefox 11

我有一个表结构如下：

<span id="MyTable"> 
    <table border="0" cellpadding="2" cellspacing="2" width="100%"> 
    <thead class="tableFloatingHeader"> 
    <tr> 
     <th>t</th> 
     <th>t</th> 
     <th>t</th> 
     <th>t</th> 
     <th>t</th> 
     <th>t</th> 
    </tr> 
    <tr> 
    <td><b>Total</b></td> 
    <td></td> 
    <td align="right"><b>2</b></td> 
    <td align="right"><b>2</b></td> 
    <td align="right"><b>2</b></td> 
    <td align="right"><b>2</b></td> 
    </tr> 
    </thead> 
<thead class="tableFloatingHeaderOriginal"> 
    <tr> 
     <th>t</th> 
     <th>t</th> 
     <th>t</th> 
     <th>t</th> 
     <th>t</th> 
     <th>t</th> 
    </tr> 
    <tr> 
    <td><b>Total</b></td> 
    <td></td> 
    <td align="right"><b>2</b></td> 
    <td align="right"><b>2</b></td> 
    <td align="right"><b>2</b></td> 
    <td align="right"><b>2</b></td> 
    </tr> 
    </thead> 

CSS

.tableFloatingHeader { 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    display: none; 
    left: auto; 
    background-color: red; 
} 

JQuery的

<script type="text/javascript"> 
     function UpdateTableHeaders() { 
      $("div.divTableWithFloatingHeader").each(function() { 
       var originalHeaderRow = $(".tableFloatingHeaderOriginal"); 
       var floatingHeaderRow = $(".tableFloatingHeader"); 
       var offset = $(this).offset(); 
       var scrollTop = $(window).scrollTop(); 
       if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) { 
        floatingHeaderRow.css("display", "block"); 
        floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px"); 

        // Copy cell widths from original header 
        $("th", floatingHeaderRow).each(function(index) { 
         var cellWidth = $("th", originalHeaderRow).eq(index).css('width'); 
         $(this).css('width', cellWidth); 
        }); 

        // Copy row width from whole table 
        floatingHeaderRow.css("width", $(this).css("width")); 
       } 
       else { 
        floatingHeaderRow.css("display", "none"); 
        floatingHeaderRow.css("top", "0px"); 
       } 
      }); 
     } 
     UpdateTableHeaders(); 
     $(window).scroll(UpdateTableHeaders); 
     $(window).resize(UpdateTableHeaders); 
    </script> 

Answer 1

这可能会帮助你的，基本上添加一个条件IE7的CSS表现风格。我不喜欢使用表达式，但IE7是另一种动物。

thead tr { 
    position: relative; 
    top: expression(this.offsetParent.scrollTop); 
    } 

http://geekswithblogs.net/LSheu/archive/2009/01/30/css-table-scrolling-with-fixed-header-for-ie-7.aspx

编辑*错误的URL