如何修復與垂直滾動中繼器控制表的標題？

我不得不修理表頭當我向下滾動我想看到列標題直到記錄結束。我做到了這一點，但我面臨一個問題。我從數據庫中獲取數據，這是一個動態數據，所以當我在表格中顯示佈局變得很奇怪。因爲如果有超過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>

來源

2012-04-09 AqEeL BaLoCh

當你的問題是「請改變我的代碼中加入此功能」，你的首要任務應該是張貼你想改變的代碼。 – Alain 2012-04-09 12:48:56

@Alain你的意思是？ – 2012-04-09 12:51:29

你可以使用下面的代碼。我修改了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>

這可能會解決你的目的....

來源

2012-04-09 13:52:29

親愛的問題是，當我輸入的數據超過500或100個單詞不適合單元格時，它會更改不應更改的表的方向，因爲每次使用精確的百分比寬度時，只要它帶有大數據它創建佈局問題的單元格我不希望這樣。如果單個單元太長，我想包裝文本。 – 2012-04-10 06:58:56

word-wrap css只有在你的數據或者說字線有空間的情況下才能正常工作。你可以嘗試一下將一些硬編碼的文本與空間。例如：第-1行：「嗨，thereisproblemwithcss」第2行：「嗨，有問題的CSS」..你可以發現，第2行工作正常與自動換行CSS。 :) – 2012-04-10 07:18:40

好吧，但是當我用不同的輸入數據測試我的應用程序時，我得到了這些詞之間沒有空格的問題。實際上，我想在我的應用程序中處理這種情況，如果這樣做會很好。 – 2012-04-10 07:25:57

如何修復與垂直滾動中繼器控制表的標題？

回答

相關問題