DataGrid固定表头

最新推荐文章于 2021-07-25 09:24:13 发布

原创

最新推荐文章于 2021-07-25 09:24:13 发布 · 981 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #header #asp.net #excel #server #table

在ASP.NET项目中，根据客户需求，使用CSS创建一个名为'fixHeaderStyle'的Class，通过设置POSITION为relative和TOP为expression(this.offsetParent.scrollTop)，实现DataGrid表格在数据过多时，滚动条下拉仍能保持Header固定的Excel样式效果。

http://www.zaoxue.com/article/tech-60092.htm

开发一个asp.net项目的过程中，客户要求我们，把所有datagrid表格的Header做成类似Excel表格，当table中数据很多的时候，我们可以下拉滚动条，还能保持header固定。在网上搜索后找到了如下比较简单的方法。具体应用如下：
1. 在CSS 中添加一个Class
.fixHeaderStyle {
font-size: 9pt;
vertical-align: middle;
text-transform: capitalize;
font-family: "Arial" , "Helvetica" , "sans-serif";
height: 25px;
background-color: #ecf4fe;
text-align: center;
text-decoration: none;
POSITION: relative; --必要的
TOP: expression(this.offsetParent.scrollTop) --必要的
}

在页面上，类似代码如：
<DIV style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 300px" align="center">
<asp:DataGrid id=grdCurRateVoy runat="server" Width="100%" Visible="True">
<ItemStyle CssClass="ItemStyle"></ItemStyle>
&nbs

最低0.47元/天解锁文章