将Sticky Div作为一个表格问题

Question

如果用户向下滚动足够远，Div Header不可见，我有一个带有粘贴标题的Table布局请求。

问题： 实施的方法工作正常，但表格列在应用position: fixed时不对齐。

髭：

<div class="GridView">
    <div class="RowHeader">
        <div class="RowItem vertical-bottom">
            <div class="HeaderCell RowCell RankCol"><span title="Index">Rank</span></div>
            <div class="HeaderCell RowCell PriorityCol vertical-bottom">
                <label>Priority</label>
            </div>
            <div class="HeaderCell RowCell MagnitudeCol vertical-bottom">
                <label>Magnitude</label>
            </div>
            <div class="HeaderCell RowCell FinancialCol vertical-bottom">
                <label>Financial Impact</label>
            </div>
            <div class="HeaderCell RowCell DollarCol vertical-bottom">
                <label>Dollar Impact</label>
            </div>
            <div class="HeaderCell RowCell DueDateCol DateColumn">
                <label>Due Date</label>
            </div>
            <div class="HeaderCell RowCell ClientCol ellipsis">
                <label>Client</label>
            </div>
            <div class="HeaderCell RowCell TaskCol ellipsis">
                <label>Task</label>
            </div>
            <div class="HeaderCell RowCell RequestorCol ellipsis">
                <label>Requestor</label>
            </div>
            <div class="HeaderCell RowCell CreatedDateCol DateColumn">
                <label>Created Date</label>
            </div>
        </div>
    </div>
    <div class="RowBody">
        {{#.}}
        <div id="tr{{ID}}" class="RowItem">
            <div class="RowCell RankCol">
                <div class="SortIndex {{DueDateStatus}}">
                    <input id="Input_Text_{{ID}}" class="DragHandle Label {{DueDateStatus}}" type="text" value="{{Rank}}"
                        onclick="javascript:Input_Click(this, {{ID}});" />
                </div>
            </div>
            <div class="RowCell PriorityCol vertical-bottom">
                <img title="{{PriorityImageFilename}}" src="Images/{{PriorityImageFilename}}.png" />
            </div>
            <div class="RowCell MagnitudeCol ellipsis">
                <label title="{{OrderOfMagnitude}}">{{OrderOfMagnitude}}</label>
            </div>
            <div class="RowCell FinancialCol ellipsis">
                <label title="{{FinancialImpact}}">{{FinancialImpact}}</label>
            </div>
            <div class="RowCell DollarCol ellipsis">
                <label title="{{DollarImpactFormat}}">{{DollarImpactFormat}}</label>
            </div>
            <div class="RowCell DueDateCol DateColumn">
                <label title="{{DueDate}}">{{DueDate}}</label>
            </div>
            <div class="RowCell ClientCol ellipsis" onclick="javascript:Table_Row_Click(this, {{ID}}, '{{Task}}');">
                <label title="{{ClientName}}">{{ClientName}}</label>
            </div>
            <div class="RowCell TaskCol ellipsis" onclick="javascript:Table_Row_Click(this, {{ID}}, '{{Task}}');">
                <label title="{{Description}}">{{{Task}}}</label>
            </div>
            <div class="RowCell RequestorCol ellipsis" onclick="javascript:Table_Row_Click(this, {{ID}}, '{{Task}}');">
                <label title="{{Requestor}}">{{Requestor}}</label>
            </div>
            <div class="RowCell CreatedDateCol DateColumn">
                <label title="{{CreatedDate}}">{{CreatedDate}}</label>
            </div>
        </div>
        {{/.}}
    </div>
</div>

CSS：

div {
    &.GridView {
        display: inline-table;
        table-layout:fixed;
        margin: 0px;
        width:100%;

        .DateColumn {
            width: 90px;
            text-align: center;
            font-size: $FontSize - 1;
        }

        .GeneralColumn {

        }
    }

    &.RowHeader {
        display: table-header-group;
        background-color: $BGPrimary;

        &.sticky {
            position: fixed;
            top: 0;
        }

        > .RowItem {
            > .HeaderCell {
                border: $StdBorder;
            }
        }

        .HeaderCell {
            font-weight: bold;
            text-align: center;
        }

        label {
            margin: 0px;
        }
    }

    &.RowBody {
        display: table-row-group;
        background-color: $BGRowNormal;

        .RowItem {
            > .RowCell {
                border: $StdBorder;
            }

            &:hover {
                background-color: $BGRowHover;
                cursor: pointer;
            }

            &.selected {
                background-color: $BGRowSelected;
            }
        }
    }

    &.RowItem {
        display: table-row;

        > .RowCell {
            display: table-cell;
        }
    }

    .RankCol {
        width: ($idxColWidth);
    }

    .PriorityCol{
        width: 55px;
        padding: 1px;
        text-align: center;

        label {
            margin: 0px;
        }
    }

    .MagnitudeCol {
        width: 110px;

        @media screen and (max-width: 1014px) {
            display:none !important;    
        }
    }

    .FinancialCol {
        width: 90px;

        @media screen and (max-width: 1014px) {
            display:none !important;    
        }
    }

    .DollarCol {
        width: 90px;
        text-align: right;
    }

    .ClientCol{
        width: 150px;
    }

    .TaskCol{
        min-width: 160px;
    }

    .RequestorCol{
        width:100px;
    }
}

使用Javascript：

$(window).scroll(function () {
    if (typeof $stickyEl !== 'undefined') {
        $stickyEl.toggleClass('sticky', $(window).scrollTop() > elTop);
    }
});

LoadTaskGridView(src.value, function () {
    $stickyEl = $('.RowHeader');
    elTop = $stickyEl.offset().top;
});

当.RowHeader在视野中时（不在窗口顶部），表格设计的所有列都会对齐并正确显示。

只要.RowHeader符合$(window).scroll(....)的要求，它就不会保留其当前的屏幕宽度。

普通图片：

问题图片：

• 最低分辨率：
• 完整决议：