GridView关于固定表头，表身可以上下动（与网上多数情况不一样）问题

如果你指定每一列的列宽,那么整个表格也必须固定宽度
或者如果你指定表格显示百分比,那么每一列也都要写成百分比
同时你所有列的px相加必须和表宽度px相等,或者百分比相加必须和表宽度百分比相等
否则就会有某些列给你自动拉伸压缩了

以下两种方法，方法一没有成功，方法二就是表头变形太厉害，无法使用。
***************************************************************************************
方法一：<head runat="server">
<title>无标题页</title>
<style>
.Freezing
  {
   position:relative ;
   table-layout:fixed;
   top:expression_r(this.offsetParent.scrollTop);
   z-index: 10;
} .Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
</style></head>  <asp:GridView ID="GridView1" runat="server"  CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None">......
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" CssClass="Freezing" />......
</asp:GridView>实现方法极其简单，缺点是没有水平滚动功能，如果表格很大的话就不方便了。方法二：protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.Attributes.Add("style", "table-layout:fixed");   //表格必须是固定大小
    }
} <head runat="server">
<title>无标题页</title><script type="text/javascript">
function init()
{
     var bodyGridView = document.getElementByIdx("<%=GridView1.ClientID%>");
     var headGridView= bodyGridView.cloneNode(true);
          for(i = headGridView .rows.length -1;i > 0;i--)
         headGridView .deleteRow(i);                                 //删掉数据行

     bodyGridView.deleteRow(0);                                     //删掉表头行
     headdiv.appendChild(headGridView);
}

window.onload = init
</script>
</head>  <div id="headdiv" style="top: 16px; left: 152px; position: absolute; width: 328px;
        height: 32px; overflow-x: hidden; overflow-y: scroll">        //不需要显示表头水平滚动条
</div>
<div id="bodydiv" style="top: 45px; left: 152px; position: absolute; width: 328px;
        height: 200px; overflow: auto" onscroll="headdiv.scrollLeft=scrollLeft">            //表体的水平滚动条拖动触发表头的水平滚动事件
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" CellPadding="4"
            Font-Names="airl" Font-Size="12px"
            ForeColor="#333333" AllowSorting="True">
......          <Columns>
     <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
             SortExpression="ID">
             <HeaderStyle Width="20px" />                             //必须定义表头和表体相同的宽度
             <ItemStyle Width="20px" />
     </asp:BoundField>
     <asp:BoundField DataField="GongYingShangBianHao" HeaderText="GongYingShangBianHao"
            SortExpression="GongYingShangBianHao">
            <HeaderStyle Width="300px" />
            <ItemStyle Width="300px" />
     </asp:BoundField>
......</Columns>......</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GIFTConnectionString %>"
            SelectCommand="SELECT......">
</asp:SqlDataSource>
</div>

width: 328px;
你div宽度比表格小太多了,而且表格也没有指定总体宽度
完全是靠每一列的宽度给"撑"出来的,不变形才怪

我以前这么做过，你可以参考：
1.将显示数据的Table放在div中，div 的style overflow-y:scroll
2.克隆Table，只留下表头的 tr
3.将克隆的Table 绝对定位到原来的Table上，定位的top ,left都是按照原来的Table位置获得的。

创建GridView表头固定、表体可滚动的控件
//js设置
<script type="text/javascript">
function s()
{
var t = document.getElementById("<%=GridView1.ClientID%>");
var t2 = t.cloneNode(true)
for(i = t2.rows.length -1;i > 0;i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}//codego.net/tags/11/1/
window.onload = s
</script>
//GridView设置
  <asp:GridView ID="GridView1" runat="server" Font-Size="12px"
              GridLines="None" CellPadding="4" Width="560px" ForeColor="#333333">
                <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
                <RowStyle BackColor="#E3EAEB" />
                <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
              <HeaderStyle BackColor="#EDEDED" Height="26px" />
                <EditRowStyle BackColor="#7C6F57" />
                <AlternatingRowStyle BackColor="White" />
            </asp:GridView>
//cs页面设置
ICollection CreateDataSource()
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        System.Data.DataRow dr;
        dt.Columns.Add(new System.Data.DataColumn("班级", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("姓名", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));        for (int i = 0; i < 50; i++)
        {
            System.Random rd = new System.Random(Environment.TickCount * i); ;
            dr = dt.NewRow();
            dr[0] = "班级" + i.ToString();
            dr[1] = "【正大光明】" + i.ToString();
            dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
            dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
            dt.Rows.Add(dr);
        }
        System.Data.DataView dv = new System.Data.DataView(dt);
        return dv;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.Attributes.Add("style", "table-layout:fixed");
            GridView1.DataSource = CreateDataSource();
            GridView1.DataBind();
        }
    }

要适应的浏览器那么多,Gridview固定表头，我还没碰到过一个完美的解决方案。
你还不如用前台Jquery框架下UI来做

啊，一个不小心，竟然碰到一个行业难题呀。不要求其他，能解决IE吗？
特别代码中：
<script type="text/javascript">
function init()
{
      var bodyGridView = document.getElementByIdx("<%=GridView1.ClientID%>");
      var headGridView= bodyGridView.cloneNode(true);
            for(i = headGridView .rows.length -1;i > 0;i--)
          headGridView .deleteRow(i);                                 //删掉数据行

      bodyGridView.deleteRow(0);                                     //删掉表头行
     headdiv.appendChild(headGridView);
}

window.onload = init
</script>
怎样设置表头中各列的宽度呢？

自己摸索解决了，需要设置：<HeaderStyle Width="20px" /> ，也就是说，将表头的宽度设置成跟表体一样就可以了。还是谢谢大家。不过还有没有更好的方法呢？

调试易

GridView关于固定表头，表身可以上下动（与网上多数情况不一样）问题

解决方案 »