当前位置 > 首页 > Asp.net

ASP.NET 如何固定表头(fixed header)

2012-10-18 21:03:00来源:Asp.net

你在HTML中渲染一张表格(可能是GridView或者Repeater),如果表格的行数太多,你就得向下拖东滚动条,但你一旦向下拖动滚动条,表头的信息就不见了。具体见下图。

image

向下拖动滚动条后,表头信息消失:

image

在本文中,我向大家讲解如何固定住表头。网上可以搜索到很多种方法来实现这个功能,但这些方法基本的原理都是一样的。就是利用div,将表头的信息复制到表身之上的一个div中。

 

<div>     表头    </div>

<div>     表身    </div>

 

滚动条只在表身div中,这样拖动表身div就不会影响到表头的div了。

 

经过我的实验,有以下两个具体的方法比较好用,分别适用于ASP.NET的Repeater控件和GridView控件。

(一)用于Repeater控件:

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function FixTableHeader() {
var t = document.getElementById("table");
var thead = t.getElementsByTagName("thead")[0];
var t1 = t.cloneNode(false);
t1.appendChild(thead);
document.getElementById(
"tableHeader").appendChild(t1)
}
window.onload
= FixTableHeader;
</script>
</head>
<body

  • My Presentations in Europe (December 2009)

    2009-12-7 11:22:00

    This past week I’ve been traveling around Europe giving a bunch of presentations (approximately 5 h

  • SQLCLR(三)触发器

    2007-5-9 22:59:00

    摘要: MSDN:Microsoft SQL Server 2005 提供了两种主要机制来强制执行业务规则和数据完整性:约束和触发器。触发器是一种特殊的存储过程,它在执行语言事件执行时自动生效。SQ

  • TechED 2007 Live Report [Orlando] - Day 2,Jun 5

    2007-6-6 11:40:00

    <说明> 为了不让翻译后意思失真,有些我保留英文介绍 </说明> 今天主要参加了五场Breakout Session,涵盖了SOA ,OFC,ARC(MS产品架构),S

  • ASP.NET MVC, WCF REST and Data Services – When to use what for RESTful services

    2010-10-9 5:34:00

    Disclaimer: This post only contains personal opinions about this subject In the way I see it, RE

  • silverlight 4.0项目 项目文件必须引用在.NET Framework

    2010-10-21 18:57:00

    编译该项目下一个类库,始终提示:项目文件必须在引用列表中包含.NET Framework程序集“WindowsBase,PresentationCore,PresentationFram

  • [.Net线程处理系列]专题三:线程池中的I/O线程

    2012-7-20 19:12:00

    上一篇文章主要介绍了如何利用线程池中的工作者线程来实现多线程,使多个线程可以并发地工作,从而高效率地使用系统资源。在这篇文章中将介绍如何用线程池中的I/O线程来执行I/O操作,希望对大家有所帮助。

  • 编译错误BC30318的解决方法

    2007-3-14 15:58:00

    摘要: 提出编译错误BC30318的错误信息,并分析此错误可能的原因及解决的办法。 阅读全文 漂泊者 2007-03-14 15:02 发表评论

  • C#经典机试题(更新中)

    2009-10-30 10:56:00

    阅读: 0 评论: 0 作者: 周枫 发表于 2009-10-30 10:48 原文链接 一.程序设计:猫大叫一声,所有的老鼠都开始逃跑,主人被惊醒。 要求:一要有联动性,老鼠和主人

  • AgileEAS.NET平台-工作流平台的用法-请假单

    2011-7-18 10:08:00

    开篇 平台的工作流平台已经基本上集成完毕,下面我们就放出来关于工作流的具体开发的过程,希望大家看看有没有什么不足之处,我们继续进行改进,目前支持的 是顺序工作流,关于状态机,后续会

  • 怎样在C++工程中集成C#窗口

    2009-12-15 2:38:00

    阅读: 88 评论: 1 作者: 是金子就会灿烂 发表于 2009-12-14 23:50 原文链接 原文地址: http://www.codeproject.com/KB/cs/Do