带有修复标题的可滚动 Gridview [重复]

Posted 2023-03-05

技术标签:

【中文标题】带有修复标题的可滚动 Gridview [重复]【英文标题】：Scrollable Gridview with a fix header [duplicate] 【发布时间】：2012-12-11 22:42:26 【问题描述】：

可能重复：Fixed GridView Header with horizontal and vertical scrolling in asp.net

我有一个任务要设计来构建一个带有修复标题的可滚动网格视图。我试过用 Div 开发它

    <div id="DataDiv" style="overflow: auto; border: 1px solid olive; 
        width: 600px; height: 300px;" />

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
            ShowHeader="false" RowStyle-VerticalAlign="Bottom">
            <Columns>
                <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle Width="30px" />
                <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
                <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
            </Columns>
        </asp:GridView>
    </div>

但它不起作用，因为标题没有得到修复。

然后我又找到了一个代码，如

<div style=" background-repeat: repeat-x; height: 30px;
        width: 200px; margin: 0; padding: 0">
        <table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" style="font-family: Arial;
            font-size: 10pt; width: 200px; color: Black; border-collapse: collapse; height: 100%;">
            <tr>
                <td style="width: 30px; text-align: center">
                   ID
                </td>
                <td style="width: 50px; text-align: center">
                    Dbms
                </td>
                <td style="width: 30px; text-align: center">
                    Version
                </td>
            </tr>
        </table>
    </div>
    <div style ="height:100px; width:617px; overflow:auto;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
            ShowHeader="false" RowStyle-VerticalAlign="Bottom">
            <Columns>
                <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle-Width="30px" />
                <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
                <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
            </Columns>
        </asp:GridView>
    </div>

在这种方法中，我使用纯 html 设计标题。

现在的问题是，实现此要求的最佳方法是什么。

【问题讨论】：

通常它会显示与该问题重复的原始问题。现在怎么不见了？ 【参考方案1】：

除了您的问题之外，您还应该了解以下几点：

1) 根据设计，表格单元格将自动调整大小并匹配最长单元格的内容，使表格可读。如果您通过固定其标题来破坏此“规则”您将不得不注意调整标题单元格的大小，因为标题不再受表格规则的约束。

2) Pure HTML/CSS solution 仅在您为所有单元格（表格和标题）设置静态长度时才有效。如果内容太长而无法容纳一个单元格并且不可能换行（我有时会使用德语名词，所以我知道这是可能的）一切都会分崩离析。

3）如果你想要一个动态的解决方案，你必须在每次内容变化时用 JS 重新计算表格单元格。

我想这很简单。如果您需要一些示例，请告诉我，我会为您提供一个。

玩得开心！

【讨论】：

【参考方案2】：