css 维持GridView头的固定

最新推荐文章于 2026-06-25 11:44:43 发布

转载最新推荐文章于 2026-06-25 11:44:43 发布 · 2.6k 阅读

标签

#css #excel #stylesheet #sql server #web

asp.net 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS样式使ASP.NET GridView控件的头部保持固定的方法。通过创建自定义的HTML表并应用特定的CSS样式，可以实现类似于Excel中冻结表头的效果。

维持GridView头的固定

Posted by Admin on 2007年5月15日 (中)

开发人员经常问的一个问题是如何维持GridView的头固定。如果你使用过Excel，你可能已经注意到了Excel的头可以冻结固定，这样如果数据记录很多，当你向下移动滚动条时，GridView头将仍然固定而并不移动。本文我将介绍如何实现这个技巧

引言

开发人员经常问的一个问题是如何维持 GridView 的头固定。如果你使用过 Excel ，你可能已经注意到了 Excel 的头可以冻结固定，这样如果数据记录很多，当你向下移动滚动条时， GridView 头将仍然固定而并不移动。本文我将介绍如何实现这个技巧

示例

让我们通过一个例子来说明这个问题。使用 Visual Stduio 建立一个 Web 站点。并在 Web 窗体上放置 SqlDataSource 控件，配置使用 CustomId ， CompanyName, ContactName 和 Country 四列，这里使用了 Sql Server2000 自带的 Northwind 数据库。

现在再在窗体上拖放一个 Panel 到 Web Form 上，设置他的 Height 属性为 200px ， Width 属性为 100% 。你可以根据需要改变这些属性。另外设置 Panel 的 ScrollBars 属性为 Auto 。这个 Auto 属性允许超过他的设置宽高时会自动显示滚动条。

添加一个新的 HTML 表，并设置为 4 列，一行为 Panel 的顶行。这个表将起固定头的作用（将来作为类似 Excel 里的头冻结作用）。在 Customer ID, Company Name, Contact Name 和 Country 里输入内容以作为标题显示。

添加一个新的 CSS 样式并建立两个 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;

}

固定头的单元格（也就是 fixedheadercell 样式）将用来用于表的所有单元格，这里的 CSS 并没有什么特别的地方。他仅仅是一个简单的 UI 相关头。第二个 CSS 类是非常重要的，他设置了属性的相对定位 i 。 Left 和 Top 分别订阅了相对与 Panel 的做像素与顶像素。接下来就可以在程序里引用这些样式了