代码之家  ›  专栏  ›  技术社区  ›  CJM

删除detailsview控件中的[选定]边框

  •  2
  • CJM  · 技术社区  · 16 年前

    我有一个 DetailsView control 其中包括构成地址的几行。理想情况下,我希望将地址行与以下两行“合并”-实际上是删除它们之间的边界。

    我猜我可以使用asp:templatefield来创建一个近似的解决方案(使用一行,但是在seconf(data)单元格中使用换行符),但是我更想看看是否有其他方法与我以前的样式相同(使用cssclass)。此外,这是一个学习练习和其他任何东西一样。

    我试过给address2的boundfield一个类,并通过css删除底部和顶部的边框,但似乎不起作用。看看html,它将类分配给一个单元格,而我认为我需要将这个类应用于整行。我无法处理完整的行,我可以处理所有行,无论是列还是一个单元格。

    有什么建议吗?

    代码段:

    HTML:

    <h2 class="title">Event Details</h2>
        <div class="entry">
            <form id="frmEvents" runat="server">
                <asp:DetailsView ID="vwEventDetails" runat="server" CssClass="vwEventDetails" FieldHeaderStyle-CssClass="FieldCol" >
                    <Fields>
                        <asp:BoundField HeaderText="Event" DataField="EventName" ReadOnly="true" SortExpression="EventName" />
                        <asp:BoundField HeaderText="Date &amp; Time" DataField="EventDate" ReadOnly="true" SortExpression="EventDate" />
                        <asp:BoundField HeaderText="Address" DataField="Address1" ReadOnly="true" SortExpression="Address1" />
                        <asp:BoundField HeaderText="" DataField="Address2" ReadOnly="true" SortExpression="Address2" ItemStyle-CssClass="noBorders" />
                        <asp:BoundField HeaderText="" DataField="Address3" ReadOnly="true" SortExpression="Address3" />
                        <asp:BoundField HeaderText="Town" DataField="Town" ReadOnly="true" SortExpression="Town" />
                        <asp:BoundField HeaderText="County" DataField="County" ReadOnly="true" SortExpression="County" />
                        <asp:BoundField HeaderText="Postcode" DataField="Postcode" ReadOnly="true" SortExpression="Postcode" />
                        <asp:BoundField HeaderText="Entry Fee" DataField="EventFee" ReadOnly="true" SortExpression="EntryFee" />
                        <asp:BoundField HeaderText="Sponsor" DataField="SponsorName" ReadOnly="true" SortExpression="Sponsor" />
                        <asp:BoundField HeaderText="Category" DataField="CategoryName" ReadOnly="true" SortExpression="Category" />
                        <asp:HyperLinkField HeaderText="" DataTextField="" Text="Make A Booking" DataNavigateUrlFields="EventID" DataNavigateUrlFormatString="bookevent.aspx?eventid={0}" />
                    </Fields>
                </asp:DetailsView>
            </form>
        </div>
    

    CSS:

    .vwEventDetails .FieldCol
    {
        font-weight: bold;
        background-color: #99CCFF;
        width: 100px;
    }
    
    .vwEventDetails tr td
    {
        padding: 0 2em;
    }
    
    .noBorders
    {
        border-bottom-style:none;
        border-top-style:none;
    }
    
    1 回复  |  直到 13 年前
        1
  •  0
  •   Ken Browning    16 年前

    我将使用两种样式:

    .noTopBorders { border-top: none; }
    .noBottomBorders { border-bottom: none; }
    

    我会指派 noTopBorders HeaderStyle-CssClass 以及 ItemStyle-CssClass “address2”和“address3”边界字段的属性。

    我会指派 noBottomBorders 头型cssclass 以及 项目样式cssclass “address1”和“address2”绑定字段的属性。