向下滚动时我必须修复表格标题我想看到列标题直到记录末尾。我做了这个,但我遇到了一个问题。我从动态数据的数据库中获取数据,所以当我在表格中显示时,布局变得很奇怪。因为如果有超过 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>
最佳答案
您可以使用如下代码。我已经修改了 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>
这可能会解决您的目的....
关于asp.net - 如何使用垂直滚动的转发器控件修复表头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10072770/