Question

我想要一个带有红色外边框和蓝色内部分隔线的gridview并使用此标记/ 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

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

请参阅此网站。这可能对你有帮助。

Answer 2

<强>更新

我认为，试试这个：

.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进行测试。

如果要添加boundfields，请在第一个和最后一个之间添加它们而不使用cssclass。

第一个和最后一个boundfield必须有.first和.last cssclass。

Answer 3

gridview是一个包含CSS-property

的表

border-collapse:collapse;

在这个模型中，必须决定，如果来自不同元素的边界被折叠，哪个边界“获胜”。

CSS规范：

“在折叠边框模型中，每个单元格的每个边缘的边框可以由在该边缘处遇到的各种元素上的边框属性指定（单元格，行，行组，列，列组和表本身），这些边框的宽度，样式和颜色可能不同。经验法则是，在每个边缘选择最“引人注目”的边框样式，除了任何出现的“隐藏”样式无条件地关闭边框

以下规则确定在发生冲突时哪种边框样式“获胜”：

'hidden'的'border-style'边框优先于所有其他冲突边框。具有此值的任何边框都会抑制此位置的所有边框。风格为“无”的边框优先级最低。仅当在此边缘处遇到的所有元素的边界属性为“none”时，才会省略边框（但请注意，“none”是边框样式的默认值。）如果没有一个样式是“隐藏的”并且其中至少有一个不是“无”，那么将丢弃窄边框以支持更宽的样式。如果有几个具有相同的'border-width'，则按此顺序首选样式：'double'，'solid'，'dashed'，'dotted'，'ridge'，'outset'，'groove'和最低： “插页”。 如果边框样式仅在颜色上有所不同，那么在单元格上设置的样式会赢得一行中的一个，它会胜过行组，列，列组，最后是表格。当两个元素相同的类型冲突，然后是左边的那个（如果表的'方向'是'ltr';右边，如果它是'rtl'）并且进一步到顶部胜利。“

所以一个好的解决方法是将表格的边框宽度设置为比单元格的宽度稍宽：

.grid
{
   border: solid 1.01px Red;
}

Answer 4

我能够通过在gridview周围放置一个div来实现这一点：

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

然后给gridview css一个白色边框，这似乎清理cellspacing = -1的事情：

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

然后给细胞一个蓝色边框：

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

需要gridview具有一些外边框和不同的内边框（.net web应用程序）

4 个答案: