Требуется gridview с некоторой внешней границей и другой внутренней границей (веб-приложение .net)

Question

Я хочу иметь вид сетки с красной внешней границей и синими внутренними разделительными линиями и использовал эту разметку / css:

<asp:GridView runat="server" ID="entries" CssClass="grid" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />        
    </Columns>        
 </asp:GridView>

.grid
{
border: solid 1px Red !important;
}

.grid td
{
border: solid 1px Blue;
}

Но в результате только красная строка заголовка имеет красную внешнюю границу, а не остальные.
Я также попробовал RowStyle таким же образом, но безуспешно.
Протестировано в IE 9, Chrome.

Answer 1

ОБНОВЛЕНИЕ

Я понял, я думаю, попробуйте это:

.grid { border: solid 1px Red; }
.grid td { border-top:solid 1px blue; }
.grid th { border-top:solid 1px red !important; }   
.grid th.first { border-right:solid 1px blue !important; }
.grid th.last { border-left:solid 1px blue !important; }    
.grid td.first { border-right:solid 1px blue !important; }
.grid td.last { border-left:solid 1px blue !important; }


<asp:BoundField DataField="Id" HeaderText="Id" HeaderStyle-CssClass="first" ItemStyle-CssClass="first" />

<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="last" ItemStyle-CssClass="last" />

Протестировано с IE9.

Если вы хотите добавить связанные поля, добавьте их между первым и последним без cssclass.

Первое и последнее ограниченное поле должно иметь .first и .last cssclass.

Answer 2

http://www.ezineasp.net/category/ASP-Net-C-Sharp-GridView-Control.aspx

Пожалуйста, смотрите этот сайт. это может вам помочь.

Answer 3

Я смог добиться этого, поместив div вокруг gridview:

<div style="border:1px solid Red; width:100%;">
    <asp:GridView ID="GVDetailedResults" ...CssClass="DetailedResults" GridLines="None">

Затем, давая сетке вида css белую рамку, это, кажется, очищает пространство ячеек = -1 вещь:

.DetailedResults {
   width: 100%;
   border: solid 1px white;
 }

Затем выделим клеткам синюю рамку:

.DetailedResults td {
    padding: 2px 5px 2px 5px;
    margin:0px;
    border:1px solid Blue;
}

Answer 4

gridview - это таблица с CSS-свойством

border-collapse:collapse;

В этой модели необходимо решить, какая граница «выигрывает», если границы из разных элементов свернуты.

Спецификация CSS:

"В модели сворачивающихся границ границы на каждом краю каждой ячейки могут быть заданы свойствами границы для множества элементов, которые встречаются на этом крае (ячейки, строки, группы строк, столбцы, группы столбцов и сама таблица). ), и эти границы могут различаться по ширине, стилю и цвету. Эмпирическое правило заключается в том, что на каждом краю выбирается наиболее «бросающийся в глаза» стиль границы, за исключением того, что любое вхождение стиля «скрытый» безусловно отключает границу .

Следующие правила определяют, какой стиль границы "выигрывает" в случае конфликта:

Границы с «пограничным стилем» «скрытого» имеют приоритет над всеми остальными конфликтующими границами. Любая граница с этим значением подавляет все границы в этом месте. Границы со стилем 'none' имеют самый низкий приоритет. Только если свойства границы всех элементов, встречающихся на этом ребре, равны «none», граница будет опущена (но учтите, что «none» является значением по умолчанию для стиля границы.) Если ни один из стилей не является «скрытым» и хотя бы один из них не является «нет», то узкие границы отбрасываются в пользу более широких. Если несколько имеют одинаковую 'border-width', тогда предпочтительны стили в следующем порядке: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' и наименьший: «вставка». Если стили границ различаются только по цвету, тогда набор стилей в ячейке побеждает один в строке, а в группе строк, столбце, группе столбцов и, наконец, в таблице. Когда два элемента тот же тип конфликта, затем еще один слева (если 'направление' таблицы '' ltr '; справа, если это' rtl ') и дальше к вершине выигрывает. "

Таким образом, хорошим обходным решением было бы установить ширину границы таблицы немного шире, чем у ячейки:

.grid
{
   border: solid 1.01px Red;
}