Wie kann ich eine abgerundete Rechteckgrafik erhalten, die sich über alle Spalten in einer ASP.NET GridView-Kopfzeile erstreckt?

Question

Wie bekomme ich eine abgerundete Rechteckgrafik, die sich über alle Spalten in einer ASP.NET GridView-Kopfzeile erstreckt?

ich zur Zeit eine abgerundete rechteckige Grafik erstellt haben und CSS verwendet haben es in die Gridview-Header Hintergrund als solche hinzuzufügen: -

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

... aber dies zeigt es nur in jeder Spalte des Kopf eher als überspannt die gesamte Kopfzeile.

Irgendwelche Ideen?

Answer 1

Ihr generiertes Datagrid müsste keinen Abstand zwischen den Spalten haben.

• die erste Spalte auf der linken Seite des abgerundeten Bild
• die Spalten in müssten zwischen
• die letzte Spalte hätte die rechte Seite des Bildes den mittleren Teil des Bildes benötigen würde

das ist die grobe Idee atleast :)

Answer 2

Verwendung Template mit Header

<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

Ich habe das schon mal gemacht. Hier ist etwa der Code, den ich kam mit:

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> 

Dann einfach erstellen Sie Ihre Bilder entsprechend und alles sollte in Ordnung sein. Meine ersten und letzten Spaltenbilder sind einige hundert Pixel breit mit einer abgerundeten Kante links von der ersten und einer abgerundeten Kante rechts von der letzten. Das mittlere Hintergrundbild ist nur 1x26 Pixel groß und wird entlang der x-Achse wiederholt.