Question

我有一个DetailsView control，其中包含几行构成地址的行。理想情况下，我想将地址行与以下两行“合并” - 基本上删除它们之间的边界。

我猜我可以使用asp：TemplateField创建一个近似解决方案（使用单行，但我们在seconf（数据）单元格中使用换行符），但我宁愿看看是否还有其他意味着沿着我以前样式的相同行（使用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;
}

Answer 1

我会使用2种风格：

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

我会将noTopBorders分配给“Address2”和“Address3”BoundFields的HeaderStyle-CssClass和ItemStyle-CssClass属性。

我会将noBottomBorders分配给“地址1”和“地址2”绑定字段的HeaderStyle-CssClass和ItemStyle-CssClass属性。

删除DetailsView控件中的[selected]边框

1 个答案: