title: thead position absolute not working in IE7
body: <p>I try to make a table header fixed when scoll down on pages. The problem is in IE7, the <strong>thead</strong> are not absolute but are showing in the "right" positions. It need to fly over the table. It works perfect in FireFox 11</p>
  
  <p>I have a table structure as follow:</p>
  
  <pre><code>&lt;span id="MyTable"&gt;
      &lt;table border="0" cellpadding="2" cellspacing="2" width="100%"&gt;
      &lt;thead class="tableFloatingHeader"&gt;
      &lt;tr&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;b&gt;Total&lt;/b&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;thead class="tableFloatingHeaderOriginal"&gt;
      &lt;tr&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
          &lt;th&gt;t&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;b&gt;Total&lt;/b&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/td&gt;
      &lt;td align="right"&gt;&lt;b&gt;2&lt;/b&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.tableFloatingHeader {
      overflow: hidden;
      position: absolute;
      top: 0;
      display: none;
      left: auto;
      background-color: red;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          function UpdateTableHeaders() {
              $("div.divTableWithFloatingHeader").each(function() {
                  var originalHeaderRow = $(".tableFloatingHeaderOriginal");
                  var floatingHeaderRow = $(".tableFloatingHeader");
                  var offset = $(this).offset();
                  var scrollTop = $(window).scrollTop();
                  if ((scrollTop &gt; offset.top) &amp;&amp; (scrollTop &lt; 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);
      &lt;/script&gt;
  </code></pre>