冻结表 asp.net 的标题行答案

【问题标题】：freeze header row for table asp.net冻结表 asp.net 的标题行
【发布时间】：2016-06-06 17:14:12
【问题描述】：

当我向下滚动表格时，我希望标题行不移动。我尝试在TableHeaderRow 的样式中添加position:fixed，但这会弄乱标题的格式。
这是我在.aspx 文件中的代码。

<asp:Table ID="tblName" runat="server" class="tblName" GridLines="Both" HorizontalAlign="Center">
    <asp:TableHeaderRow ForeColor="White" BackColor="DodgerBlue" Style="position:fixed ;background: linear-gradient(to bottom right, #6688FF, #AACCFF);  height: 4em; text-align: center; text-transform: capitalize;">
        <asp:TableHeaderCell Text="Action" />
        <asp:TableHeaderCell Text="title" />
        <asp:TableHeaderCell Text="title2" /> 
        <asp:TableHeaderCell Text="title3" />
        <asp:TableHeaderCell Text="title4" />
        <asp:TableHeaderCell Text="title5" />
        <asp:TableHeaderCell Text="title6" />
        <asp:TableHeaderCell Text="title7" />
        <asp:TableHeaderCell Text="title8" />
        <asp:TableHeaderCell Text="title9" />
        <asp:TableHeaderCell Text="Comment" />
    </asp:TableHeaderRow>
</asp:Table>

【问题讨论】：

为什么要使用asp表头行？你不能用简单的表格和div吗？
我可以，但这是给我的代码。我被告知要使用已经这样编写的表格来实现该功能。如果我要从头开始重写代码，我肯定会使用一个简单的表格。

标签： javascript html css asp.net

【解决方案1】：

如果您愿意使用普通的 html 表格，那么您可以使用此代码

<table style="width: 300px" cellpadding="0" cellspacing="0">
  <tr>
   <td>Column 1</td>
   <td>Column 2</td>
 </tr>
</table>

<div style="overflow: auto;height: 100px; width: 320px;">
 <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
   <td>Value 1</td>
   <td>Value 2</td>
  </tr>
  <tr>
   <td>Value 1</td>
   <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
 <tr>
  <td>Value 1</td>
  <td>Value 2</td>
 </tr>
</table>

【讨论】：