冻结表asp.net的标题行

时间:2016-06-06 17:14:12

标签: javascript html css asp.net

当我向下滚动表格时,我希望标题行不会移动。我尝试在position:fixed的样式中添加TableHeaderRow,但这会混淆标题的格式 这是我在.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>

1 个答案:

答案 0 :(得分:0)

如果您打开使用普通的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>