Grid固定表头和固定栏css实现

简介: .Freezing    {         position:relative ;    table-layout:fixed;    top:expression(this.offsetParent.
<style>
.Freezing 
   { 
    
   position:relative ;
   table-layout:fixed;
   top:expression(this.offsetParent.scrollTop);  
   z-index: 10;
   }

.Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
</style>

 

<div style="overflow-y: scroll; height: 200px;width:300px" id="dvBody">

<asp:GridView ID="GridView1" runat="server"   ......

.....

 

                        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" CssClass="Freezing"/>
                    </asp:GridView>
        </div>

 

用法:CSS设如上的样式,HeaderStyle加CssClass="Freezing,套住GridView的Div设置高度宽度 <div style="overflow-y: scroll; height: 200px;width:200px" >

 

另外一种css写法

.fixedheadercell
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    WIDTH: 200px;
    COLOR: white;
   
    BACKGROUND-COLOR: darkblue;
}
 
.fixedheadertable
{
    left: 0px;
    position: relative;
    top: 0px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
}
 
.gridcell
{
    WIDTH: 200px;
}

 

用于固定栏的css

.fixedHeaderTr  
    {  
        background-color:whitesmoke;  
        z-index:10;  
        position:relative;  
        top:expression(this.offsetParent.scrollTop);  
}
用css   比较好

 

固定栏, 我猜是

.Freezing 
   { 
    
   position:relative ;
   table-layout:fixed;
   left:expression(this.offsetParent.scrollLeft);  
   z-index: 10;
   }

.Freezing td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}

 

 

http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx

 

/* Div container to wrap the datagrid */
div#div-datagrid {
width: 420px;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

/* Locks the left column */
td.locked, th.locked {
font-size: 7pt;
text-align: left;
background-color:inherit;
font-weight: bold;
position:relative;
cursor: default;
left: expression(document.getElementById("div-datagrid").scrollLeft-2); /*IE5+ only*/
}


/* Locks table header */
th {
font-size: 7pt;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
font-weight:bold;
height:15pt;
border-right: 1px solid silver;
position:relative;
cursor: default;
top: expression(document.getElementById("div-datagrid").scrollTop-2); /*IE5+ only*/
z-index: 10;
}

/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;text-align:center;}


/* DataGrid Item and AlternatingItem Style*/
.GridRow {font-size: 7pt; color: black; font-family: Verdana; background-color:#ffffff; height:15px;}
.GridAltRow {font-size: 7pt; color: black; font-family: Verdana; background-color:#eeeeee; height:15px;}

http://www.codeproject.com/KB/aspnet/FreezeHeader.aspx

 

目录
相关文章
|
12月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
361 99
|
12月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
12月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
260 2
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
153 3
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
204 1
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
672 0
|
前端开发 算法 容器
css【详解】grid布局—— 网格布局(栅格布局)(一)
css【详解】grid布局—— 网格布局(栅格布局)(一)
1328 1
|
前端开发
CSS Grid 布局:span 关键字
CSS Grid 布局:span 关键字
234 0
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
619 0
|
前端开发 容器
css【详解】grid布局—— 网格布局(栅格布局)(二)
css【详解】grid布局—— 网格布局(栅格布局)(二)
292 0

热门文章

最新文章