我正在使用ASP.NET ListView控件,目前我有一个可滚动的网格:
(以下示例简化并包含嵌入式样式以便提问)
<asp:ListView ID="ListView" runat="server" DataKeyNames="Id">
<LayoutTemplate>
<div style="height:225px; overflow:auto;">
<table runat="server">
<tr>
<th>
<span>Column1</span>
</th>
<th>
<span>Column2</span>
</th>
<th>
<span>Column3</span>
</th>
</tr>
<tr id="itemPlaceholder" runat="server" />
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr id="items" runat="server">
<td class="first">
<%#Eval("Column1")%>
</td>
<td>
<%#Eval("Column2")%>
</td>
<td>
<%#Eval("Column3")%>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
我想应用CSS以便我的标题得到修复。
我可以添加哪些样式以使其有效?
答案 0 :(得分:2)
答案 1 :(得分:1)
我刚刚提出这个问题:您不需要使用CSS,只需将布局模板中的标题行定义为单独的表格即可。然后将一个新表格包装在一个带有overflow=scroll
的div中,然后将你的内容库持有者放入。
注意标题中有一个额外的列,这是为滚动条腾出空间。然后将列的宽度设置为与标题相同,即可完成。
您必须包含一些JavaScript才能在回发后保持滚动位置,但这是一个不同的主题。这是我如何完成它的一个例子。
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<EmptyDataTemplate>
<table id="Table1" runat="server"
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr style="background-color: #E0FFFF;color: #333333;">
<td style="width:100px;">
<asp:LinkButton ID="Butpullacct" OnClick="Butpullacct_Click" runat="server">Reaccess</asp:LinkButton>
</td>
<td style="display:none">
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
</td>
<td style="width:100px;">
<asp:Label ID="BTNRSLabel" runat="server" Text='<%# Eval("BTNRS") %>' />
</td>
<td style="width:100px;">
<asp:Label ID="NoticeDueLabel" runat="server"
Text='<%# Eval("NoticeDue")%>' />
</td>
<td style="width:75px;">
<asp:Label ID="NoticeTypeLabel" runat="server"
Text='<%# Eval("NoticeType") %>' />
</td>
<td style="width:200px;">
<asp:Label ID="DispDescLabel" runat="server" Text='<%# Eval("DispDesc") %>' />
</td>
<td style="width:175px;">
<asp:Label ID="AccessTimeLabel" runat="server"
Text='<%# Eval("AccessTime") %>' />
</td>
<td style="width:175px;">
<asp:Label ID="ExitTimeLabel" runat="server" Text='<%# Eval("ExitTime") %>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="Table2" runat="server">
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="1"
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr id="Tr2" runat="server" style="background-color: #E0FFFF;color: #333333;">
<th id="Th1" runat="server" style="width:100px;"></th>
<th id="Th2" runat="server" style="display:none">
id</th>
<th id="Th3" runat="server" style="width:100px;">
BTNRS</th>
<th id="Th4" runat="server" style="width:100px;">
Notice Due Date</th>
<th id="Th5" runat="server" style="width:75px;">
Notice Type</th>
<th id="Th6" runat="server" style="width:200px;">
Action</th>
<th id="Th7" runat="server" style="width:175px;">
Access Time</th>
<th id="Th8" runat="server" style="width:175px;">
Exit Time</th>
<th id="Th9" style="width:13px;" runat="server">
</th>
</tr>
</table>
<div style="overflow:scroll; height:500px;">
<table border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</div>
</td>
</tr>
<tr id="Tr3" runat="server">
<td id="Td2" runat="server"
style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>