datagrid 内容过长 ,自动折行,表格被撑开的解决方案--转载
功能:
1 按列分色;2 内容过长自动隐藏3 mouseover自动展开
使用方法:
a: 定义以下样式:
b: DataGrid 应用样式:
htc文件: ...嘿嘿.
1 按列分色;2 内容过长自动隐藏3 mouseover自动展开
使用方法:
a: 定义以下样式:
1
/*智能表格样式,在DataGrid设cssclass为Guid,
2
表头cssclass:GuidTH,表内容cssclass:GuidTD
3
Title为展开单无格时的样式*/
4
.Guid{}{
5
border-top:0pt solid white;
6
table-layout: fixed;
7
behavior:url(GuidV2.htc);
8
}
9
.GuidTH{}{
10
background-color: #5f9fd4;
11
height:21px;
12
color:white;
13
font-weight: bold;
14
}
15
.GuidTD{}{
16
height:25px;
17
padding-left:5px;
18
background-color: #eef2fe;
19
20
}
21
.Title{}{
22
position:relative;top:-2px;left:-2px;
23
border-bottom:1pt solid #93BEE2;
24
border-top:1pt solid #93BEE2;
25
border-left:buttonface 1px ridge;
26
border-right:buttonface 1px ridge;
27
z-index:0;
28
height:20;
29
font-size:14px;
30
background-color: #eef2fe;
31
padding-top:0;
32
padding-left:0;
33
padding-right:4px;
34
cursor:default;
35
}
/*智能表格样式,在DataGrid设cssclass为Guid,2
表头cssclass:GuidTH,表内容cssclass:GuidTD3
Title为展开单无格时的样式*/4
.Guid{}{5
border-top:0pt solid white;6
table-layout: fixed;7
behavior:url(GuidV2.htc);8
}9
.GuidTH{}{10
background-color: #5f9fd4;11
height:21px;12
color:white;13
font-weight: bold;14
}15
.GuidTD{}{16
height:25px;17
padding-left:5px;18
background-color: #eef2fe;19

20
}21
.Title{}{22
position:relative;top:-2px;left:-2px;23
border-bottom:1pt solid #93BEE2;24
border-top:1pt solid #93BEE2;25
border-left:buttonface 1px ridge;26
border-right:buttonface 1px ridge;27
z-index:0;28
height:20;29
font-size:14px;30
background-color: #eef2fe;31
padding-top:0;32
padding-left:0;33
padding-right:4px;34
cursor:default;35
}b: DataGrid 应用样式:
1
<asp:datagrid id="dg1" Runat="server" Width="**%" AutoGenerateColumns="False" DataKeyField="**" cssclass="Guid">
2
<AlternatingItemStyle CssClass="GuidTD"></AlternatingItemStyle>
3
<ItemStyle CssClass="GuidTD"></ItemStyle>
4
<HeaderStyle HorizontalAlign="Center" CssClass="GuidTH"></HeaderStyle>
<asp:datagrid id="dg1" Runat="server" Width="**%" AutoGenerateColumns="False" DataKeyField="**" cssclass="Guid">2
<AlternatingItemStyle CssClass="GuidTD"></AlternatingItemStyle>3
<ItemStyle CssClass="GuidTD"></ItemStyle>4
<HeaderStyle HorizontalAlign="Center" CssClass="GuidTH"></HeaderStyle>htc文件: ...嘿嘿.


浙公网安备 33010602011771号