When using the CSS Friendly Control Adapters, you get an easy to modify the look and feel of all your controls through one style sheet. With the gridview style, you can set the text alignment for your columns:
.PrettyGridView
.AspNet-GridView table tbody tr td
{
color: #333333;
background: White;padding: 2px 8px 3px 2px;
border-bottom: solid 1px #CCCCCC;border-right: solid 1px #CCCCCC;
text-align: left;vertical-align: top;
}
However, there are cases when you don't want all columns to be aligned the same way. While left alignment works for most items, if you're displaying numbers chances are you'll want to right-align them. However, if you modify the above CSS to right alignment, ALL columns will be right aligned. Fortunately there is an easy solution: add another class and then specify that class for the specific column you want to right align. For example, a simple solution is to add the following to your gridivew style sheet:
/* Use this ItemStyle-CssClass to align numeric columns to the right */
.PrettyGridView
.AspNet-GridView table tbody tr td.number
{
text-align: right;
}
Then you need to specify this style for you numeric columns. For bound fields, you can use as follows:
<asp:BoundField HeaderText="Total Amount" DataField="totalLineAmount" SortExpression="totalLineAmount" DataFormatString="{0:#,##0.00}" ItemStyle-CssClass="number" />
For template fields, use as follows:
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("remainingAmount", "{0:#,##0.00}") %>' ForeColor='<%# IIF(Eval("remainingAmount")>=0,System.Drawing.Color.Black,System.Drawing.Color.Red) %>'></asp:Label>
</ItemTemplate>
<ItemStyle CssClass="number" />