There is actually CSS styling you can do in huge detail on CFGRID, but it isn't provided with the standard documentation, so it is totally metaphysically obscure. None of it seems able to remove the invasive underline should you be crazy enough to use HREF in your CFGRID, but aside from that, everything else seems do-able.
Here are the three little things I critically needed to find and use:
1. TEXT WRAPPING in CFGRID
It would just truncate my text in every row. Since it won't let you size the grid by % but insists on a hard coded pixel number, that just made it worse.
Your CFGRID must be in a CFFORM. Give that an ID value. Mine:
<cfform name="myform" id="myformid">
<CFGRID . . .
Then in your stylesheet do the following:
<style>
#myformid
.x-grid-row td {white-space:normal;}
</style>
That will make it wrap. The above means it affects everything 'inside' the 'myformid' ID value, and it affects the entire grid, and all the row, and the table cells within the grid rows, and the white-space:normal makes that wrap.
2. HEADER ROW STYLING in CFGRID
I wanted the header row of labels to look different than the default. I know everyone loves those silver gradient skins but the top row seemed to sort of fade into unnoticed in this case. There is another style that lets you mess with that:
.x-grid-hd-text {background-color: #D9CCFF; color: #661A99; font-size: 120%; font-weight: bold;}
That'll do it.
3. ROW HOVER STYLING in CFGRID
I'd set all these style values but the entire row color change when you mouse over it wasn't changing, and it was some kind of cyan-like color by default. Looked really interesting with my purple-based grid as you might imagine. I finally found the code to change that row-sized hover color:
.x-grid-row-over td { background:#661A99;}
So there you have it. To set my row styling, text wrapping, and a decent hover, I had this:
<style type="text/css">
#myformid
.x-grid-row td {white-space:normal; text-decoration: none;}
.x-grid-hd-text {background-color: #D9CCFF; color: #661A99; font-size: 120%; font-weight: bold;}
.x-grid-row-over td { background:#661A99;}
</style>
And it looks like this:
