Настройка границ столбцов GridView для каждого столбца

Question

У меня есть несколько столбцов, и я хочу, чтобы границы слева и справа были примерно такими:

| column1 column2 | column3 column4 |

Если я укажу границу в ItemStyle, она будет показана с обеих сторон и не будет отображать отсутствие столбца между столбцами 1 и 2 и столбцом 3 и 4.

Есть предложения?

Answer 1

Создайте стиль в своем CSS, например:

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

Затем присвойте его 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>

, который будет производить:

| column1 column2 | column3 column4 |

Вы можете изменить стиль в соответствии с тем, что вам нужно, например, справа, слева или сверху и т. Д.

Просто создайте уникальный стиль для каждого из столбцов, которые отличаются.

Answer 2

вы можете попробовать стиль как

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

Проверьте этот пример