透過CSS設定，達到類似Excel凍結視窗的效果(固定上面、左邊表頭)

2009-01-09

42514
0
(.NET)ASP.NET
2009-01-16

透過CSS設定，達到類似Excel凍結視窗的效果

直接看asp範例

<%@ Language=VBScript %>
<%
xcnt = 50
ycnt = 60
%>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<style type="text/css">
      .FixedTitleRow
        {
            position: relative; 
            top: expression(this.offsetParent.scrollTop-2); 
            z-index: 10;
            background-color: #E6ECF0;
        }
        
        .FixedTitleColumn
        {
            position: relative; 
            left: expression(this.parentElement.offsetParent.scrollLeft-2);
        }
        
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft-2);
            background-color: #E6ECF0;
        }

</style>

</HEAD>
<BODY>
<div style="width:800px;height:560px;overflow:scroll;">
	<Table border=1>
		<tr class="FixedTitleRow">
			<th class="FixedTitleColumn">xxxx1</th>
			<th class="FixedTitleColumn">xxxx2</th>
			<th class="FixedTitleColumn">xxxx3</th>
		<%For x = 4 to xcnt%>
			<th class="">th<%=x%></th>
		<%Next%>
		</tr>
	<%For y = 1 to ycnt%>
		<tr>
			<td class="FixedDataColumn">xxxxyyyy</td>
			<td class="FixedDataColumn">xxxxyyyy</td>
			<td class="FixedDataColumn">xxxxyyyy</td>
		<%For x = 4 to xcnt%>
			<td>td<%=x%>,<%=y%></td>
		<%Next%>	
		</tr>
	<%Next%>	
	</table>
</div>
</BODY>
</HTML>

相同的方式，應該也可以用在ASP.NET的GridView裡面

ASP.NET的GridView請看這篇在GridView中使用CSS固定上、左表頭(似Excel凍結視窗)(限IE)(含操作錄影)

參考網址：http://www.chenjiliang.com/Article/View.aspx?ArticleID=1876&TypeID=30

以下是簽名：