GridView的固定表头,页面有时隐藏
我的页面是左右框架,就像这个CSDN一样
在右框架上,有个页面我用CSS做的GridView固定表头,现在可以实现效果,但是当我点两个框架中的“箭头”的时候,GridView的页眉被隐藏了,如果多试几次,有的时候又能显示出来。这个问题真是很麻烦啊,大家能帮帮我吗
CSS如下
/* Div container to wrap the datagrid */
div#div-gridview {
width: 420px;
height: 200px;
overflow:auto;
overflow-x:hidden;
scrollbar-base-color:#ffeaff;
}
/* Locks the left column */
td.locked, th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: CornflowerBlue;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}
/* Locks table header */
th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: CornflowerBlue;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
z-index: 10;
}
/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}
/* DataGrid Item and AlternatingItem Style*/
.GridRow {font-size: 10pt; color: black; font-family: Arial; background-color:#ffffff; height:35px;}
.GridAltRow {font-size: 10pt; color: black; font-family: Arial; background-color:#eeeeee; height:35px;}
框架页代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.3790.2817" name=GENERATOR>
<SCRIPT>
function switchSysBar(){
if (switchPoint.innerText==3){
switchPoint.innerText=4
document.all("frmTitle").style.display="none"
}else{
switchPoint.innerText=3
document.all("frmTitle").style.display=""
}}
</SCRIPT>
<link href="../css/Gsoft.css" rel="stylesheet" type="text/css" />
<STYLE type=text/css>
.navPoint {
FONT-SIZE: 9pt; CURSOR: hand; COLOR: white; FONT-FAMILY: Webdings
}
.STYLE2 {FONT-SIZE: 10pt; CURSOR: hand; COLOR: #0b50bc; FONT-FAMILY: Webdings; }
</STYLE>
</HEAD>
<BODY style="MARGIN: 0px" scroll=no>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD id=frmTitle vAlign=top noWrap align=middle>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" bgcolor="#E6EEF7">
<IFRAME id=carnoc
style="Z-INDEX: 2; VISIBILITY: inherit; margin-left:0; margin-right=0; HEIGHT: 100%"
name=carnoc src="legal.aspx" scrolling="auto" frameBorder=0 marginwidth="0" width="160">
</IFRAME>
</td>
</tr>
<tr>
<td height="80" bgcolor="#E6EEF7">
<IFRAME id="ifrPopup"
style="Z-INDEX: 2; VISIBILITY: inherit; WIDTH: 150px; HEIGHT: 80"
name="ifrPopup" src="popup.aspx" frameBorder=0 scrolling="no" marginwidth="0">
</IFRAME>
</td>
</tr>
</table>
</TD>
<TD bgColor="#d1e2fe" style="WIDTH: 9pt;border-right:#ADD6F3 1px solid;">
<TABLE height="100%" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="HEIGHT: 100%" onclick=switchSysBar()><FONT
style="FONT-SIZE: 9pt; CURSOR: default; COLOR: #ffffff"><BR><SPAN
class=STYLE2 id=switchPoint
title="挂起/展开">3</SPAN><BR>
<BR></FONT></TD></TR></TBODY></TABLE></TD>
<TD style="WIDTH: 100%">
<IFRAME id=main
style="Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
name="main" src="../blank.aspx" frameBorder=0
scrolling=yes marginwidth="0">
</IFRAME>
</TD></TR>
</TBODY></TABLE>
</BODY>
</HTML>
<SCRIPT>
if(window.screen.width<'1024'){switchSysBar();}
</SCRIPT>
[解决办法]
th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: CornflowerBlue;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
z-index: 10;
}
把th换成th.unlocked试试。
有可能读样式的时候前后互相覆盖了。
[解决办法]
div+gridview+table 加实固定表头,还有垂直滚动条
[解决办法]
up