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

 

目录
相关文章
|
8天前
|
前端开发 开发者 UED
解锁网页布局的秘密武器:探索 CSS Grid 布局的神奇魔力
解锁网页布局的秘密武器:探索 CSS Grid 布局的神奇魔力
16 3
|
1月前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
16 0
|
4天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
4天前
|
前端开发 UED 容器
【专栏:CSS进阶篇】CSS Grid布局:构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统,适用于复杂页面结构,如页眉、主体和侧边栏。通过定义网格线和单元格,能轻松创建行和列。基本语法包括设置容器为grid容器,定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中,CSS Grid能有效提升开发效率和用户体验,尤其在响应式设计和复杂布局场景下。
|
13天前
|
前端开发 容器
彻底学会 css grid布局
【4月更文挑战第19天】CSS Grid布局是二维布局的强大工具,涉及核心概念:网格容器、网格项、网格线和轨道。关键属性包括定义列行的`grid-template-columns/rows`、区域布局的`grid-template-areas`、间距的`grid-gap`、对齐方式的`justify-content/align-items`以及简写形式`place-content/place-items`。学习过程需结合实践,通过探索不同属性和值的组合,实现复杂布局。深入了解和不断练习将提升布局设计能力。
22 6
|
22天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
|
3月前
|
前端开发 JavaScript API
|
4月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
4月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
4月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局