css with datagrid

Published 06-21-2006 11:10 AM | jokiz
i was having some problem yesterday on setting the border color of the datagrid.  setting the BorderColor property of the datagrid will set the outer box border of the html table together with the borders of the table cells.  since i will be using the same styles for most of the datagrids used in my web application, i wanted to apply css with it.

at first i tried setting the border-color for the css class used by the datagrid and it sets the border color of the outer box of the html table.  

[code language="ASPX"]
<STYLE>
.datagridList
{
    border-color:White;
}
</STYLE>
<asp:DataGrid runat="server" id="dgList" CssClass="datagridList">
</asp:DataGrid>
[/code]

i also applied the same border-color style to the css class for the datagrid header styles and item styles

[code language="ASPX"]
<STYLE>
.gridHeader
{
    border-color:White;
    background-color:Yellow;
}
.gridItem
{
    border-color:White;
    background-color:Gray;
}
</STYLE>
<asp:DataGrid runat="server" id="dgList" CssClass="datagridList" HeaderStyle-CssClass="gridHeader" ItemStyle-CssClass="gridItem">
</asp:DataGrid>
[/code]

this does not solve the case.  the border color of the cells were not set.  It turns out that the HeaderStyle and ItemStyle css were applied only to TR of the rendered HTML TABLE.  border-color does not apply to TD (see here) so my problem now is reduced to how to set the border-color of the TDs of the table.

luckily i was able to find a post in the asp.net forums (i'm planning to be active on the said forum site in the next couple of months by the way).  turns out that you can specify styles for TDs in the grid such as this:

[code language="ASPX"]
<STYLE>
.datagridList td
{
    border-color:White;
}
</STYLE>
[/code]

since i have applied the said class (datagridList) to the datagrid control, this means all TD for the rendered HTML table will have the said settings.  i even encountered a post where you can specify styles for the first and last occurences.  pretty powerful css, eh.  more to learn...

[EDIT] I think this is called Contextual Selectors
Filed under: , , ,

Comments

# erantivas said on June 19, 2007 12:33 AM:

This has worked to me.