如何使用带有垂直滚动的转发器控件修复表头?

Posted

技术标签:

【中文标题】如何使用带有垂直滚动的转发器控件修复表头?【英文标题】:how to fix header of table with repeater controll with vertical scroll? 【发布时间】:2012-04-21 19:12:15 【问题描述】:

当我向下滚动时,我必须修复表的标题,我想看到列标题直到记录结束。我做了这个,但我面临一个问题。我从数据库中获取数据,这是一个动态数据,所以当我在表格中显示它时,布局变得很奇怪。因为如果有一列超过 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>

【问题讨论】:

当您的问题是“请更改我的代码以添加此功能”时,您的首要任务应该是发布您想要更改的代码。 【参考方案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>

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

【讨论】:

亲爱的问题是,当我输入超过 500 或 100 个单词且不适合单元格的数据时,它会更改不应更改的表格方向,因为我对每列使用精确的百分比宽度,每当它在单元格中带有大数据时,它都会产生布局问题,我不希望这样。如果文本对于单个单元格来说太长,我想换行。 word-wrap css 仅当您的数据或说单词行在 beetween 中有空格时才能正常工作。您可以尝试将一些带有空格的硬编码文本。例如: line-1 : "Hi,thereisproblemwithcss" line-2 :"Hi, There is problem with css" ..你会发现 line-2 与 word-wrap css 配合得很好。 :) 好的,但是当我用不同的输入数据测试我的应用程序时,我遇到了这些单词之间没有空格的问题。实际上我想在我的应用程序中处理这种情况,如果这样做会很棒。 ok ..如果你不能修改你的数据..那么你需要为你的每个数据添加 div 并为溢出属性应用 css。我已经使用这个建议修改了我的答案。如果可行,请尝试...

以上是关于如何使用带有垂直滚动的转发器控件修复表头?的主要内容,如果未能解决你的问题,请参考以下文章

修复了带有水平滚动条和垂直滚动条的标题表

带有滚动正文的引导固定表头

VB 中如何给listview控件定义或设置垂直滚动条(水平滚动条不要)

当 flexbox 内容垂直居中时如何修复滚动? [复制]

如何在ios的页面控件中实现水平和垂直滚动

如何在 MFC 中垂直同步两个列表控件