如何使圆角矩形图形跨越ASP.NET GridView标题行中的所有列？

如何使圆角矩形图形跨越ASP.NET GridView标题行中的所有列

我目前已经创建了一个圆角矩形图形，并使用CSS将其添加到gridview标题背景中，如下所示：-

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

。。。但这只是在标题的每一列中显示它，而不是跨越整个标题行

---

有什么想法吗？

生成的数据网格必须在列之间没有间距

• 第一列需要圆形图像的左侧
• 中间的列需要图像的中间部分
• 最后一列将显示图像的右侧

---

这至少是一个粗略的想法：）

生成的数据网格必须在列之间没有间距

• 第一列需要圆形图像的左侧
• 中间的列需要图像的中间部分
• 最后一列将显示图像的右侧

---

这至少是一个粗略的想法：）

将templatefield与headertemplate一起使用

<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>

...
您的标题格式如您所愿。。。
您现有的布局在这里。。。

将templatefield与headertemplate一起使用

<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>

...
您的标题格式如您所愿。。。
您现有的布局在这里。。。

我以前做过这个。下面是我大致得出的代码：

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;
}

表th.第一列{
背景：url（images/layout/tb_left.png）0 0无重复；
}
表th{
高度：26px；
背景：url（images/layout/tb_bg.png）0 0 repeat-x；
}
/*在浏览器之间出现一些问题，仅仅是将图像放在浏览器中，就必须使用span*/
表th最后一列跨度{
显示：块；
高度：26px；
背景：url（images/layout/tb_right.png）100%0无重复；
}

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>

第1栏
第2栏
第3栏
第4栏
...
...

---

然后，只需创建相应的图像，一切都应该很好。我的第一列和最后一列图像有几百像素宽，第一列左侧有一个圆形边缘，最后一列右侧有一个圆形边缘。中间的背景图像只有1x26像素，沿x轴重复。

我以前做过。下面是我大致得出的代码：

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;
}

表th.第一列{
背景：url（images/layout/tb_left.png）0 0无重复；
}
表th{
高度：26px；
背景：url（images/layout/tb_bg.png）0 0 repeat-x；
}
/*在浏览器之间出现一些问题，仅仅是将图像放在浏览器中，就必须使用span*/
表th最后一列跨度{
显示：块；
高度：26px；
背景：url（images/layout/tb_right.png）100%0无重复；
}

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>

第1栏
第2栏
第3栏
第4栏
...
...

然后，只需创建相应的图像，一切都应该很好。我的第一列和最后一列图像有几百像素宽，第一列左侧有一个圆形边缘，最后一列右侧有一个圆形边缘。中间的背景图像仅为1x26像素，沿x轴重复