如何修复与垂直滚动中继器控制表的标题？

Question

我不得不修理表头当我向下滚动我想看到列标题直到记录结束。我做到了这一点，但我面临一个问题。我从数据库中获取数据，这是一个动态数据，所以当我在表格中显示布局变得很奇怪。因为如果有超过1000个单词的列将改变其宽度，而我提到了表格单元格宽度和百分比。我怎么能解决这个问题，头部仍然在顶部，并且布局不会受到任何数据干扰。我不想使用jQuery

.gridScrollDiv 
{ 
border:1px solid #CCCCCC; 
height: 500px; 
overflow: scroll; 
overflow-x: hidden; 
} 

<div class="gridScrollDiv"> 
    <table id="tblData" class="grid" style="width: 100%;" cellpadding="0"> 
     <thead style="position:absolute;"> 
      <tr> 
       <th style="width:40%;"> 
        Code 
       </th> 
       <th style="width:40%;"> 
        Description 
       </th> 
       <th style="width:20%;"> 
        Date 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <asp:Repeater ID="rptLoation" runat="server"> 
       <ItemTemplate> 
        <tr> 
         <td style="width:40%; word-wrap:breake-word;"> 
          <%# DataBinder.Eval(Container.DataItem, "Code")%> 
         </td> 
         <td style="width:40%; word-wrap:breake-word;"> 
          <%# DataBinder.Eval(Container.DataItem, "Description")%> 
         </td> 
         <td style="width:20%; word-wrap:breake-word;"> 
          <%# DataBinder.Eval(Container.DataItem, "RegistrationDate")%> 
         </td> 
        </tr> 
       </ItemTemplate> 
      </asp:Repeater> 
     </tbody> 
    </table> 
</div> 

Answer 1

你可以使用下面的代码。我修改了css。

.gridScrollDiv 
    { 
     border: 1px solid #CCCCCC; 
     height: 500px; 
     overflow-y: scroll; 
    } 

从中继器取出头部。

<table style="width: 100%;"> 
    <tr style="font-weight: bold;"> 
     <tr> 
      <td style="width: 40%; text-align: left"> 
       Code 
      </td> 
      <td style="width: 40%; text-align: left"> 
       Description 
      </td> 
      <td style="width: 20%; text-align: left"> 
       Date 
      </td> 
     </tr> 
</table> 
<div class="gridScrollDiv"> 
    <asp:Repeater ID="rptLoation" runat="server"> 
     <HeaderTemplate> 
      <table style="width: 100%;"> 
     </HeaderTemplate> 
     <ItemTemplate> 
      <tr> 
       <td style="width: 40%; word-wrap: breake-word;"> 
        <div style="width: 350px; overflow-x: scroll;"> 
        <%# DataBinder.Eval(Container.DataItem, "Code")%> 
        </div> 
       </td> 
       <td style="width: 40%; word-wrap: breake-word;"> 
        <div style="width: 350px; overflow-x: scroll;"> 
        <%# DataBinder.Eval(Container.DataItem, "Description")%> 
        </div> 
       </td> 
       <td style="width: 20%; word-wrap: breake-word;"> 
        <div style="width: 350px; overflow-x: scroll;"> 
        <%# DataBinder.Eval(Container.DataItem, "RegistrationDate")%> 
        </div> 

       </td> 
      </tr> 
     </ItemTemplate> 
     <FooterTemplate> 
      </table> 
     </FooterTemplate> 
    </asp:Repeater> 
</div> 

这可能会解决你的目的....