3

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

enter image description here

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?

naveen
  • 53,448
  • 46
  • 161
  • 251
  • 7
    I think [this](http://stackoverflow.com/questions/10843380/100-height-block-with-vertical-text) is a very usefull post for you – iddo Jun 08 '12 at 10:31

1 Answers1

2

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

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

Huangism
  • 16,278
  • 7
  • 48
  • 74