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 colu开发者_运维问答mns 1 and 2 and column 3 and 4.

Any suggestions?

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.

you could try a style like

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

Check out this example