Question

I try to make a table header fixed when scoll down on pages. The problem is in IE7, the thead are not absolute but are showing in the “right” positions. It need to fly over the table. It works perfect in FireFox 11

I have a table structure as follow:

<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

This may help you, basically add a conditional CSS expression style for IE7. I don’t like using expressions, but IE7 is another animal.

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

Edit* Wrong URL