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!   

  • 相关阅读:
    使用RedisDesktopManager客户端无法连接Redis服务器问题解决办法
    centos7 安装postgresql11
    CentOS7安装MySQL(完整版)
    【Linux】CentOS7下安装JDK详细过程
    用FastDFS一步步搭建文件管理系统
    ELK教程3:logstash的部署、SpringBoot整合ELK+Filebeat
    ELK教程2:Kibana的安装
    ELK教程1:ElasticSearch集群的部署ELK
    设置侧边栏动态漫画
    Kubernetes中的workload(工作负载)
  • 原文地址:https://www.cnblogs.com/weicleer/p/2771577.html
Copyright © 2011-2022 走看看