rotating text on a table using css3

Question

I am trying to create a table for printing purpose.
As seen in many forms, I want vertically rotated text and both left and right side of the form.

So far I have achieved this

Fiddle: http://jsfiddle.net/naveen/P8AZD/

This has two problems

1. I wanted the border td widths as 50 px with the text spanning more area. Currently the rotated text also gets clipped to 50px. How to overcome this?
2. The style rotate-right has incorrect filter: progid:DXImageTransform.Microsoft.Matrix. It has been copied from .rotate-left. What does the values (M11, M12, M21, M22) in the filter denote?

What is wrong with my code?

Answer 1

See http://jsfiddle.net/P8AZD/7/

I added a div around your text and made it not wrap