Javascript 滚动时固定gridview标题的位置

我想固定gridview标题的位置，以便在垂直滚动列时必须看到标题。我尝试了多种解决方案，但没有一种对我有效。 下面是asp.net中最常用的修复gridview标头的代码 请解决我的问题，为什么它不起作用

csscode

.包装师
{
宽度：560px；高度：290px；边框：1px纯黑；
}        
.WrapperDiv
{
/*IE需要*/
位置：相对位置；
}
包装师
{
/*IE需要*/
高度：0px；
}

javascript代码

var headerHeight=8；
冻结GridViewHeaderForeiandFF（'GridView2'，'WrapperDiv'）；
函数冻结GridViewHeaderForieAndFF（gridViewId，wrapperDivCssClass）{
调试器；
var grid=document.getElementById（gridViewId）；
如果（网格）{
if（grid.style&&grid.style.visibility）
grid.style.visibility='hidden'；
if（grid.parentNode）{
//通过GridView查找包装器div输出
var div=grid.parentNode；
如果（div.tagName==“div1”）{
div.className=wrapperDivCssClass；
div.style.overflow=“自动”；
}
}
var grid=准备执行领导（grid）；
var tbody=grid.getElementsByTagName（'tbody'）[0]；
//Firefox需要
tbody.style.height=（div1.offsetHeight-headerHeight）+“px”；
tbody.style.overflowX=“隐藏”；
tbody.overflow='auto'；
tbody.overflowX='hidden'；
grid.style.visibility='visible'；
}
}
函数prepareFixedHeader（网格）{
//查找domtbody元素并
var tags=grid.getElementsByTagName（'TBODY'）；
如果（标记！=“未定义”）{
var-tbody=tags[0]；
var trs=tbody.getElementsByTagName（'TR'）；
如果（trs！=“未定义”）{
人头高度+=trs[0]。离视；
//从中移除第一个TR标签
var headTR=tbody.removeChild（trs[0]）；
//创建一个名为THEAD的新元素
var head=document.createElement（'THEAD'）；
头.附肢儿童（头TR）；
//添加到THEAD元素而不是TR so CSS样式
//可以在IE和FireFox中正确应用
grid.insertBefore（head，grid.firstChild）；
}
}
返回网格；
}

gridview asp代码

---

您可以尝试将标题与内容分开，并将标题置于可滚动内容之外

<div>Some Page Content </div>
    //your heading goes here
    <div style="max-height: 400px; overflow: auto;">
       //your gridview goes here
    </div>
<div>Some Page Content </div>

某些页面内容
//你的航向在这里
//你的gridview在这里
一些页面内容

像这样

 <div style="float: left; width: 100%;">
        <table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
            border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
            width: 100%;">
            <tr style="background-color: #E5E5FE">
                <th style="width: 15%;">
                    Order
                </th>
                <th style="width: 15%;">
                    Column Title
                </th>
                <th style="width: 15%;">
                    DataType
                </th>

            </tr>
        </table>
    </div>
    <div style="max-height: 200px; overflow: auto; float: left; width: 100%;">
        <asp:GridView ID="GridView2" Style="table-layout: fixed;" Width="100%" AutoGenerateColumns="false"
            AllowSorting="true" runat="server" CellPadding="4" ForeColor="#333333" GridLines="both" ShowHeader="False">
            <AlternatingRowStyle BackColor="White"     />
            <Columns>
                <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                <ItemStyle Width="15%" />
                </asp:TemplateField>
                  <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                      <ItemStyle Width="15%" />

                </asp:TemplateField>
                  <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                      <ItemStyle Width="15%" />

                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

命令
栏目标题
数据类型

这是js版本。但是在链接中，标题的宽度是以像素为单位的。因此，它不会随着页面的缩小而缩小

http://www.codeproject.com/Articles/61775/Grid-View-with-Fixed-Header

---

但是如何将gridview标题与gridview分开呢？请给出我的例子！请参考任何人，请检查mereally发布的代码中的错误。感谢您的帮助

<div>Some Page Content </div>
    //your heading goes here
    <div style="max-height: 400px; overflow: auto;">
       //your gridview goes here
    </div>
<div>Some Page Content </div>

 <div style="float: left; width: 100%;">
        <table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
            border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
            width: 100%;">
            <tr style="background-color: #E5E5FE">
                <th style="width: 15%;">
                    Order
                </th>
                <th style="width: 15%;">
                    Column Title
                </th>
                <th style="width: 15%;">
                    DataType
                </th>

            </tr>
        </table>
    </div>
    <div style="max-height: 200px; overflow: auto; float: left; width: 100%;">
        <asp:GridView ID="GridView2" Style="table-layout: fixed;" Width="100%" AutoGenerateColumns="false"
            AllowSorting="true" runat="server" CellPadding="4" ForeColor="#333333" GridLines="both" ShowHeader="False">
            <AlternatingRowStyle BackColor="White"     />
            <Columns>
                <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                <ItemStyle Width="15%" />
                </asp:TemplateField>
                  <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                      <ItemStyle Width="15%" />

                </asp:TemplateField>
                  <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                      <ItemStyle Width="15%" />

                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

http://www.codeproject.com/Articles/61775/Grid-View-with-Fixed-Header