Override Tapestry Grid

I want to extend the tapestry Grid component to be able to get the following behavior:

I want a specific column to have the text aligned to the right, which is no 开发者_如何学Cproblem with css. However I also want the icons for the table sorting (in the table's header) to be left of the text (not right) in this case.

Is this possible?

---

However I also want the icons for the table sorting (in the table's header) to be left of the text (not right) in this case.

I'm basing my answer on this random demo: http://jumpstart.doublenegative.com.au/jumpstart/previews/easycrud/persons

.t-data-grid th:nth-child(3) a:last-child {
    float: left
}
.t-data-grid th:nth-child(3) a > img {
    margin: 0 4px 0 0
}

You can replace th:nth-child(3) with a class if desired, for example th.lastName.

:last-child/nth-child is not supported in IE7/8. If you need to support those browsers, you can instead use :first-child, which is supported:

.t-data-grid th.lastName a {
    float: left
}
.t-data-grid th.lastName a:first-child {
    float: none
}
.t-data-grid th.lastName a > img {
    margin: 0 4px 0 0
}