zoukankan      html  css  js  c++  java
  • Freezing GridView Column Headers using Only CSS

    Recently I wrote an article describing how you could use CSS plus a GrdiView Control Adaptor to add the 'frozen column headers' feature to your GridView. 

    Live Demo (IE only) | Download

    I received the following comment from a kind reader named Mitch:

    I have also noticed that applying a skin to the gridview also seems to create TH elements for the headers. I have a simple solution that freezes the headers by doing the following:

    • apply a skin to a gridview.
    • wrap the gridview in a div or fieldset.
    • Apply a css class to the wrapper that sets the overflow to scroll and the TH position to relative. You may need to set the TR height to 0px for IE.

    I set the height of the wrapper in the local style so I can reuse the css class. I have tested this in IE6 & 7 and Firefox and it works great.

    Wow.  If this is true, it has a number of advantages over my original solution:

    1. It can be applied without using Control Adaptors - one less dependency
    2. It works with both IE and FF
    3. It is really simple!

    So I took this feedback and tried to fix up my old sample site.  I created a new site from my trusty GridView web site template and started following Mitch's advise.  First off, I created a regular GridView and placed it inside a DIV element like so.  Notice I assign the DIV to the container class.

    <div class="container" style="height:300px; 700px;">
        <asp:GridView 
            runat="server" AutoGenerateColumns="false" 
            AllowSorting="true" DataSourceID="odsCustomers" BorderWidth="0px">
            <Columns>
                <asp:BoundField HeaderText="ID" DataField="CustomerID" SortExpression="CustomerID" />
                <asp:BoundField HeaderText="Name" DataField="ContactName" SortExpression="ContactName" />
                <asp:BoundField HeaderText="Title" DataField="ContactTitle" SortExpression="ContactTitle" />
                <asp:BoundField HeaderText="Address" DataField="Address" SortExpression="Address" />
                <asp:BoundField HeaderText="City" DataField="City" SortExpression="City" />
            </Columns>
        </asp:GridView>
    </div>

    Next, I created the container css style class as Mitch suggests ...

    /* So the overflow scrolls */
    .container {overflow:auto;}
    
    /* Keep the header cells positioned as we scroll */
    .container table th {position:relative;}
    
    /* For alignment of the scroll bar */
    .container table tbody {overflow-x:hidden;} 

    Finally, I added back in the other styles that are not related to the frozen headers to spruce things up a bit.  At this point I opened IE to test it out and sure enough it works great.  The only problem is that (again) it doesn't work in FireFox.  It behaves better than my original solution in that the grid renders fine, just the header columns do not stay stationary.  Even though it isn't perfect, I figured I would pass Mitch's solution on since it seems to be hands down better than my original one.  If anyone know's how FF can be supported with pure CSS, I would be interested.

    That's it.  Enjoy!   

  • 相关阅读:
    使用VC++生成调试信息
    在Xp home上安装Rose 2003
    SkyDrive注册方法
    vsftpd同时使用系统用户和虚拟用户验证
    如何查看linux系统版本
    在RedHat AS中安装SVN
    Vnc & Gdm
    (转)如何:在设备上安装 SQL Server Compact 3.5
    java培训学习笔记一
    因为此版本的应用程序不支持其项目类型(.csproj),若要打开它,请使用支持此类型项
  • 原文地址:https://www.cnblogs.com/weicleer/p/2771577.html
Copyright © 2011-2022 走看看