columns headings vertically - crossbw

Question

I have to draw a table with many columns. In order to make the table fit into the screen, I have decided to print the column headings vertically.

How to implement a cross-browser solution for the output of vertical headers? Browsers: IE6+, FF3.0+, Opera 9.5+, Chrome 4.0+

Answer 1

.tableClass th {

writing-mode: tb-rl;

filter: fliph() flipV();

}

For cross browser implementation use jQuery.
Have a look on this SO discussion. Vertical text inside table headers using a JavaScript-based SVG library

Answer 2

Here is a fiddle demonstrating the use of CSS3 Transform: http://jsfiddle.net/PhilippeVay/hXnsT/
IE has its own rotating property (with 90° steps, that would be OK for your needs here), but I didn't included it in the fiddle because the origin of rotation isn't the same than for CSS3 transform.

This fiddle was an answer to How to create vertical table heading text with html5 canvas?. The other solution from @dev-null-dweller uses canvas, so you'll have to consider old IE separately. One thing that lacks in its solution is original text. The text should be put in a span or div and moved out of the viewport with text-indent: -9999px; position: absolute;. That way screen readers will still read the textual content to their users (canvas isn't accessible yet)