0

ページを下に移動するときにテーブルヘッダーを修正しようとしています。問題はIE7にあり、theadは絶対的なものではありませんが、「正しい」位置に表示されています。テーブルの上を飛ぶ必要があります。Firefox11で完璧に動作します

私は次のようなテーブル構造を持っています：

<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>
4

1 に答える 1

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

于 2012-06-19T14:03:48.930 に答える