DataTable with vertical text in the header

Question

Is it possible to change the orientation of the facet header in a primefaces DataTable? Basically I want something like this: http://www.primefaces.org/showcase/ui/datatableBasic.jsf but with Model/Manufacturer/Year/Color to be written vertically (BUT with all the text from the table to stay horizontal).

I know I can rotate the text with css but then I have to manually set the width and height of the header, which is a bit annoying as the whole table will be dynamic (http://www.primefaces.org/showcase/ui/datatableDynamicColumns.jsf). Since the dataTable sets the W and H for the "unrotated" text.

Answer 1

Until the CSS3 writing-mode property is stable and widely adopted so that you could just use .ui-datatable th { writing-mode: vertical-lr; }, your current best bet is really to have an image instead of text in the header. As far MSIE >= 6 is the only browser which supports this property for which you don't need to change the dimensions. Test yourself with writing-mode: tb-lr;