CODEWITHSUNDEEP
.netgridviewborder
AGuyCalledGerald
AGuyCalledGerald

Reputation: 8150

Need gridview with some outer border and different inner border (.net web application)

I want to have a gridview with a red outer border and blue inner separator lines and used this markup/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;
}

But the result is that only the header row has a red outer border, not the others.
I also tried RowStyle in the same way, with no success.
Tested in IE 9, Chrome.

Upvotes: 3

Views: 15535

Answers (4)

russds
russds

Reputation: 875

I was able to acheive this by putting a div around the gridview:

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

Then giving the gridview css a white border, this appears to clean up the cellspacing=-1 thing:

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

Then giving the cells a blue border:

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

Upvotes: 0

user1037656
user1037656

Reputation:

UPDATE

I got it I think, try this:

.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" />

Tested with IE9.

If you want to add boundfields, add them between the first and last one without cssclass.

The first and last boundfield must have .first and .last cssclass.

Upvotes: 1

AGuyCalledGerald
AGuyCalledGerald

Reputation: 8150

A gridview is a table with the CSS-property

border-collapse:collapse;

In this model, it has to be decided, which border "wins" if borders from different elements are collapsed.

The CSS spec:

"In the collapsing border model, borders at every edge of every cell may be specified by border properties on a variety of elements that meet at that edge (cells, rows, row groups, columns, column groups, and the table itself), and these borders may vary in width, style, and color. The rule of thumb is that at each edge the most "eye catching" border style is chosen, except that any occurrence of the style 'hidden' unconditionally turns the border off.

The following rules determine which border style "wins" in case of a conflict:

Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.) If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins."

So a good workaround would be to set the border-width of the table a little wider than that of the cell:

.grid
{
   border: solid 1.01px Red;
}

Upvotes: 0

Dipen Chudasama
Dipen Chudasama

Reputation: 3093

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

Please see this site. this may be help you.

Upvotes: 1

Related Questions