如何獲取圓角矩形圖形以跨越ASP.NET GridView標題行中的所有列？

Question

如何獲取圓角矩形圖形以跨越ASP.NET GridView標題行內的所有列？

我現在已經創建了一個圓角矩形圖形，並使用CSS將其添加到GridView標題背景爲這樣： -

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

...但是這只是顯示在頁眉中的每一列而比跨越整個標題行。

任何想法？

Answer 1

您生成的datagrid必須在列之間沒有間距。

• 第一列需要四捨五入的圖像的左側
• 之間需要的圖像
• 的中間部分列中的最後一列將有圖像的右側

那是粗糙的想法ATLEAST :)與HeaderTemplate中

Answer 2

使用模板列

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

Answer 3

我以前做過這個。這裏的大致我想出了代碼：

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軸重複。