Как я могу получить прямоугольник с закругленными углами, чтобы охватить все столбцы в строке заголовка ASP.NET GridView?

Question

Как получить прямоугольник с закругленными углами для охвата всех столбцов в строке заголовка ASP.NET GridView?

В настоящее время я создал прямоугольник с закругленными углами и использовал CSS, чтобы добавить его к фону заголовка gridview следующим образом: -

.datagrid th
{
    background-image: url('../images/rounded_graphic.jpg');
}

... но это просто отображает его в каждом столбце заголовка, а не охватывает всю строку заголовка.

Есть идеи?

Answer 1

Ваш сгенерированный массив данных не должен иметь промежутков между столбцами.

• для первого столбца потребуется левая сторона округленного изображения
• столбцам между ними потребуется средняя часть изображения
• последний столбец будет иметь правую сторону изображения

Вот грубая идея, по крайней мере:)

Answer 2

Я делал это раньше. Вот пример кода, который я придумал:

CSS

table th.first-column {
    background: url(images/layout/tb_left.png) 0 0 no-repeat;
}

table th {
    height: 26px;
    background: url(images/layout/tb_bg.png) 0 0 repeat-x;
}

/* Had some issues across browsers just putting the image in the <th>, had to use a span */
table th.last-column span {
    display: block;
    height: 26px;
    background: url(images/layout/tb_right.png) 100% 0 no-repeat;
}

HTML

<table width="100%" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th class="first-column"><span>Column 1</span></th>
            <th><span>Column 2</span></th>
            <th><span>Column 3</span></th>
            <th class="last-column"><span>Column 4</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
        ...
        </tr>                           
    </tbody>
    <tfoot>
        <tr>
        ...
        </tr>
    </tfoot>
</table>

Тогда просто создайте свои изображения соответственно, и все должно быть хорошо. Мои изображения в первом и последнем столбцах имеют ширину в несколько сотен пикселей с закругленным краем слева от первого и закругленным краем справа от последнего. Среднее фоновое изображение составляет всего 1x26 пикселей и повторяется вдоль оси X.

Answer 3

использовать поле шаблона с шаблоном заголовка

<asp:GridView ID="gvPrograms" runat="server"
        ...    
        >
        ...
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                     your header formatted as you like here...
                    <table>
                    </table>
                </HeaderTemplate>
                <ItemTemplate>
                </ItemTemplate>
                    your existing layout here...
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>            
</asp:GridView>