Web Trenches

When using the CFGRID tag (type="html"), there is no built-in way to align the data in the columns.  The dataalign attribute of the CFGRIDCOLUMN tag is not available for the HTML grid type.  There is a simple CSS trick to align the columns.

Each column in the grid has its own css class, and there is also a class that applies to all columns.  The x-grid-col class allows you to apply formatting to all of the columns at once, for example: .x-grid-column {text-align:right;}.  The rest of the columns have numbers associated with them, starting with 0 as the first column.  So, the code below aligns all of the grid columns to the right, then sets only the first and second columns to align left.

 <style type="text/css">
    .x-grid-col {text-align:right;}
    .x-grid-col-0 {text-align:left;}
    .x-grid-col-1 {text-align:left;}
</style>

 You can also update just the column headers using a similar method.  The  headeralign attribute of cfgridcolumn also doesn't work for HTML grids.

 <style type="text/css">
    .x-grid-hd {text-align:center;}      
    .x-grid-hd-0-0 {text-align:left;}     
    .x-grid-hd-0-1 {text-align:left;}
</style>