Removing [selected] borders in a DetailsView control

Question

I have a DetailsView control which includes several rows that form an address. Ideally I'd like to 'merge' the Address row with the following two rows - essentially removing the borders between them.

I'm guessing that I could use a asp:TemplateField to create an approximate solution (use a single row, but us line breaks in the seconf (data) cell), but I'd rather see if there are any other means along the same lines of my previous styling (using CssClass). Besides, this is a learning exercise as much as anything else.

I've tried giving the Address2 BoundField a class and removing the bottom and top borders via CSS, but it doesn't seem to work. Looking at the HTML, it is assigning the class to a single cell, whereas I think that I need to apply this class to to the whole row. I can't any means of address the full row; I can deal with all rows, either column or just one cell.

Any suggestions?

Thanks in advance.

Code Snippets:

HMTL:

     <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

I would use 2 styles:

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

I would assign noTopBorders to the HeaderStyle-CssClass and the ItemStyle-CssClass properties of the "Address2" and "Address3" BoundFields.

I would assign noBottomBorders to the HeaderStyle-CssClass and the ItemStyle-CssClass properties of the "Address1" and "Address2" Bound Fields.