ASP.NET 中可滚动 GridView 上方的固定表头

DrABELL

4.72/5 (13投票s)

2012 年 10 月 6 日

CPOL

3分钟阅读

164653

提示描述了一种 CSS3 格式化技术，该技术允许创建 Web 表格标头，无论滚动如何，该标头始终位于表格顶部

引言

一种简单的格式化技术允许通过使用 position.fixed 和 tr:nth CSS3 属性在任何由 GridView 控件呈现的可滚动 HTML5 表格的顶部创建一个固定位置的表格标头。下面的演示显示了所提出解决方案的实际实现以及与 HTML5/CSS3 网页布局相关的其他设计实践。

纯 HTML5/CSS3 解决方案

带有固定表头的示例表格由 ASP.NET GridView 控件生成，允许自上而下滚动内容，同时保持其标头“冻结”在相同位置（它还包含可排序的列 - GridView 控件中 readily available 的另一个功能）。该解决方案使用纯 HTML5/CSS3 功能实现 - 无需 JavaScript。

图 1 具有固定标头和可滚动内容的 GridView 表格，示例屏幕截图

背景

我一直在寻找一种简单的可靠的解决方案来呈现 GridView 标头行，无论滚动位置如何，该行始终“像一块岩石”一样位于数据表顶部。显然，我并不孤单，因为在 Web 开发博客圈中发现了无数的踪迹/线索，都指向同一组问题 [1...5]。经过 Google 和多次尝试后，我没有找到任何足够令人满意的：一些解决方案已经过时且难以移植（例如，使用那个 expression 属性），而且几乎所有解决方案都过于复杂，考虑到相对简单的任务。一些解决方案实现了 JavaScript，我不建议将其用于页面布局设计，除非绝对必要。现代 Web 编程的关注点分离范例是编码

HTML5 元素中的内容
CSS3 样式中的展示
Javascript/jQuery 中的功能

因此，我决定继续开发自己的解决方案，该解决方案预计应为

在主要的 HTML5 兼容 Web 浏览器之间普遍可移植
完全使用最新的 HTML5/CSS3 功能实现（没有过时的东西）
没有与表格布局设计相关的任何 Javascript
清晰、透明且极其简单

多次“假设”迭代产生了解决方案，如上所示并在下面描述。

Using the Code

此解决方案背后的简单而强大的想法是字面理解 position.fixed 属性，以便“冻结”GridView 的表格标头，即

将 position.fixed 属性应用于 GridView 控件的标头行样式
向第二个表格行添加 padding-top，将其值设置为 => 标头的高度

关于 GridView HTML 渲染的几个词：标头行是相应 HTML 表格 (tr) 中的第一行，必须将其“固定”在其他行的顶部。标头行包含 th 元素（而不是像表格其余部分那样的 td），可以单独格式化，如提示后面所示。

为了应用 CSS 样式，请使用 CssClass 属性指向相应的 CSS 格式规范。清单 1-3 中的以下代码片段演示了此概念的实际实现。

清单 1. GridView HTML 的重要部分

<asp:GridView ID="GridView1" runat="server"CssClass="grdCamera">
<HeaderStyle CssClass="headerCamera"</HeaderStyle> ...|rest of GridView code|

请注意 CssClass=grdCamera 和 CssClass=headerCamera（该名称反映了示例DEMO 的主题域）属性，这些属性指向以下 CSS3 规范中的伪类（清单 2）。

清单 2. CSS 解决方案

/**** GridView TABLE (grdCamera) *******/
table.grdCamera
{
    /* table width */
    min-width:600px;
    width:50%;
}
        
/****TABLE HEADER (headerCamera) *******/
table.grdCamera tr.headerCamera
{
    position:fixed;
    overflow:hidden;
    white-space:nowrap;
    width:50%;
    margin:0;
    z-index:100;
}

/*padding content of 2nd row (it's the 1st data row)*/
table.grdCamera tr:nth-child(2) td
{
    padding-top:40px;
}

上面的 CSS3 代码段实际上完成了这项工作。在表格内容上下滚动期间，表格标头将“像一块岩石”一样保持静止。请注意应用于 CSS 样式格式指令 (tr.headerCamera) 中的标头行的 position.fixed

CSS 属性 padding-top:40px 实际上是向下移动第一行数据行的内容，以便补偿表格标头行的高度（在其他开发中，请相应地调整此特定值）。

清单 3. 使用 CSS 选择器 `nth` 格式化标头列 (th)

/*general formatting applied to all header columns*/
table.grdCamera tr.headerCamera th
{
    padding:5px 0px 5px 0px;
    text-align:center;
}       

/*individual formatting of 4th header column*/
table.grdCamera tr.headerCamera th:nth-child(4)
{
    width:40%;
}

/*individual formatting of 3rd header column*/         
table.grdCamera tr.headerCamera th:nth-child(3)
{
    width:40%;
}

/*individual formatting of 2nd header column*/
table.grdCamera tr.headerCamera th:nth-child(2)
{
    width:120px;
}

/*individual formatting of 1st header column*/
table.grdCamera tr.headerCamera th:first-child
{
    width:12%;
    text-align:center;
}

上面的 CSS 代码段演示了使用 th:first-child 和 th:nth-child(N) 选择器单独格式化 GridView 表格标头列的示例。

历史

此解决方案于 2010 年 10 月 1 日发布，利用了 ASP.NET 3.5 类库，并且与 ASP.NET 的其他版本向前兼容。