如何在asp.net列表视图中轻松创建固定标题

Question

我试图在滚动时保持标题固定，但我无法弄清楚。

这是我的ListView代码：

    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="FormSectionSubSectionItemRelID" OnSelectedIndexChanged="ListView1_SelectedIndexChanged">

这是我的sites.css表CSS代码：

table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}

th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-left: 0;
}

th a {
    display: block;
    position: relative;

}

th a:link, th a:visited, th a:active, th a:hover {
    color: #333;
    font-weight: 600;
    text-decoration: none;
    padding: 0;
}

th a:hover {
    color: #000;
}

th.asc a, th.desc a {
    margin-right: .75em;
}

th.asc a:after, th.desc a:after {
    display: block;
    position: absolute;
    right: 0em;
    top: 0;
    font-size: 0.75em;
}

th.asc a:after {
    content: '▲';
}

th.desc a:after {
    content: '▼';
}

td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}

tr.pager td {
padding: 0 0.25em 0 0;
}

如果有一个属性我可以更改或更改我的 CSS 代码，那就太好了。

Answer 1

如果您也可以从服务器端获取代码并创建代码演示，这对您解决这个问题将非常有帮助。

但是，只需查看您的代码，看看您如何询问如何尝试在页面顶部修复某些内容，我在您的CSS代码中看到页面顶部有一个绝对定位的元素，我假设您希望滚动时要固定此元素吗？

如果是这种情况，那么您需要将此代码从绝对更改为固定。

th.asc a:after, th.desc a:after {
  display: block;
  position: fixed; //fixed will not scroll with the page, where absolute will.
  right: 0em;
  top: 0;
  font-size: 0.75em;
}

Answer 2

在引导表上的滚动条的帮助下并修改 LayoutTemplate 就可以完成。必须重写一些引导 CSS 才能使其工作。

<LayoutTemplate>
            <div>
                <table border="1" 
                    style="width:96.9%; max-width:100%; background-color:#FFFFFF; border-collapse:collapse; border-color:#999999; border-style:none; border-width:1px; font-family:Verdana, Arial, Helvetica, sans-serif;">
                    <thead>
                        <tr>
                            <th style="width:8%; background-color: #E0FFFF; color: #333333;" >Car Number</th>
                            <th style="width:7%; background-color: #E0FFFF; color: #333333;" >License Number</th>
                            <th style="width:9%; background-color: #E0FFFF; color: #333333;" >Make</th>
                            <th style="width:8%; background-color: #E0FFFF; color: #333333;" >Model</th>
                            <th style="width:7%; background-color: #E0FFFF; color: #333333;" >Current Miles</th>
                            <th style="width:7%; background-color: #E0FFFF; color: #333333;" >Oil Change Date</th>
                            <th style="width:7%; background-color: #E0FFFF; color: #333333;" >Oil Change Miles</th>
                            <th style="width:7%; background-color: #E0FFFF; color: #333333;" >Tire Rotation Miles</th>
                            <th style="width:7%; background-color: #E0FFFF; color: #333333;" >Last Wash Date</th>
                            <th style="width:6%; background-color: #E0FFFF; color: #333333; text-align:center;" >Location</th>
                            <th style="width:4%; background-color: #E0FFFF; color: #333333; text-align:center;" >Active</th>
                            <th style="width:5%; background-color: #E0FFFF; color: #333333; text-align:center;" >New Oil Change</th>
                            <th style="width:12%; background-color: #E0FFFF; color: #333333;" >Oil Type</th>
                            <th style="width:auto; border-right:none; border-top:none;"></th>
                        </tr>
                    </thead>
                </table>
            </div>

             <div style="width:100%; overflow:auto; max-height:450px;">
                <table border="1" 
                    style="width:98%; max-width:100%; background-color:#FFFFFF; border-collapse:collapse; border-color:#999999; border-style:none; border-width:1px; font-family: Verdana, Arial, Helvetica, sans-serif;">
                    <tr runat="server" id="itemPlaceholder"></tr>
                </table>  
            </div>             
         
        </LayoutTemplate>