带有固定标题的数据网格滚动答案

【问题标题】：Datagrid scrolling with fixed headers带有固定标题的数据网格滚动
【发布时间】：2011-02-16 18:10:42
【问题描述】：

如何在 DataGrid 或 GridView 上有一个固定的标题并允许网格滚动？

我想避免使用另一个单独的表作为标题的解决方案。

【问题讨论】：

您可能想阅读自己的问题。它可能看起来不像你期望的那样。

标签： asp.net gridview datagrid webforms scroll

【解决方案1】：

将表头放在表头中是我知道的唯一解决方案。我可以在这里展示如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>Scrolling tbody</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>TABLE {
    BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 100%; BORDER-BOTTOM: black 1px solid
}
.noscroll {
    BACKGROUND-COLOR: silver
}
TBODY {
    OVERFLOW: auto; HEIGHT: 130px; width: 300px;
}
TH {
    HEIGHT: 20px
}

TABLE {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px
}
.container {
    BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; OVERFLOW: auto; BORDER-LEFT: black 1px solid; WIDTH: 300px; BORDER-BOTTOM: black 1px solid; HEIGHT: 150px
}
.noscroll {
    POSITION: relative
}
</STYLE>
<META content="MSHTML 6.00.6000.16525" name=GENERATOR></HEAD>
<BODY>
<DIV class=container>
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <THEAD>
  <TR class=noscroll>
    <TH>Col 1</TH>

    <TH>Col 2</TH>
    <TH>Col 3</TH>
    <TH>Col 4</TH>
    <TH>Col 5</TH></TR></THEAD>
  <TBODY>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR>
  <TR>
    <TD>1</TD>

    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD></TR></TBODY></TABLE></DIV></BODY></HTML>

【讨论】：