您的位置:首页 > Web前端 > CSS

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

2008-08-03 19:58 627 查看
<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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: