CODEWITHSUNDEEP
asp.netgridviewcoding-styleborder
frenchie
frenchie

Reputation: 51927

Customizing GridView column borders for each column

I have several columns and I want to have borders on the left and on the right of some like this:

| column1 column2 | column3 column4 |

If I specify the border in the ItemStyle, it shows on both side and won't render the absence of column between columns 1 and 2 and column 3 and 4.

Any suggestions?

Upvotes: 3

Views: 24860

Answers (2)

Kelsey
Kelsey

Reputation: 47726

Create a style in your CSS like:

<style type="text/css">
    td.column_style_left
    {
        border-left: 1px solid black;
    }    
    td.column_style_right
    {
        border-right: 1px solid black;
    }    
</style>

Then assign it to the TemplateField:

<asp:TemplateField>
    <ItemStyle CssClass="column_style_left" />
    <ItemTemplate>
        <!-- whatever you want here -->
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
    <ItemStyle CssClass="column_style_right" />
    <ItemTemplate>
        <!-- whatever you want here -->
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
    <ItemTemplate>
        <!-- whatever you want here -->
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
    <ItemStyle CssClass="column_style_right" />
    <ItemTemplate>
        <!-- whatever you want here -->
    </ItemTemplate>
</asp:TemplateField>

Which will produce:

| column1 column2 | column3 column4 |

You can change the style to match what you need like right side, left or top, etc...

Just make a unique style for each of the columns that differ.

Upvotes: 5

Bala R
Bala R

Reputation: 108937

you could try a style like 

  table td:nth-child(2n) {
        padding:2px 8px;
        border-right:1px solid black;
    }

Check out this example

Upvotes: 0

Related Questions