Удаление [выбранных] границ в элементе управления DetailsView

У меня есть Элемент управления DetailsView, который включает несколько строк, образующих адрес. В идеале я хотел бы «объединить» строку Address со следующими двумя строками, по существу удалив границы между ними.

Я предполагаю, что я мог бы использовать asp: TemplateField для создания приблизительного решения (используйте одну строку, но с разрывами строк в ячейке secondf (данные)), но я бы предпочел посмотреть, есть ли какие-либо другие средства вдоль те же строки моего предыдущего стиля (с использованием 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;
}
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
3 165
1

Ответы 1

Я бы использовал 2 стиля:

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

Я бы назначил noTopBorders свойствам HeaderStyle-CssClass и ItemStyle-CssClass полей "Address2" и "Address3".

Я бы назначил noBottomBorders свойствам HeaderStyle-CssClass и ItemStyle-CssClass связанных полей «Address1» и «Address2».

Кен, спасибо, но это тоже не сработало. Я мог бы вносить различные изменения, используя ваши предлагаемые классы, но не удалять границы. Есть другие идеи?

CJM 18.01.2009 02:45

Мне нужно увидеть вашу страницу, чтобы понять, почему она вам не подходит. Ваша ссылка в настоящее время не работает.

Ken Browning 19.01.2009 12:07

Хммм ... Это сейчас - не уверен, когда и почему он когда-либо падал.

CJM 27.01.2009 15:23

Страница отображается правильно в ie7 и chrome, но не в FF. Я бы начал с удаления стиля border-collapse в таблице, удаления атрибута border из таблицы и использования css для применения границ к атрибутам td этой таблицы.

Ken Browning 28.01.2009 10:45

Другие вопросы по теме