Table header text transform

Question

I have used transform: rotate(270deg) for table header, but since names in that header are not equal ( not even close) it looks ugly, so I have to make every column equal width. Some text in table header is made with 2 or 3 words, some are single word.

Here it is how it looks like: http://img571.imageshack.us/img571/9527/tbl.png

All I want, is that every column has same width, no matter how long name in header is, and name put to be in 2 rows max.

Edit: Example:

http://jsfiddle.net/SvAk8/

.header {


-webkit-transform: rotate(270deg);  
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(27deg);
transform: rotate(270deg); 
white-space: pre-line; 
width: 50px;
height: 180px; /* to be adjusted: column is not always tall enough for text */
margin: 0 -80px;
vertical-align: middle;

}

Answer 1

Add this specification:

table { width: 100%; table-layout: fixed; }

table-layout: fixed; does this:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

and requires a specified width. See https://developer.mozilla.org/en-US/docs/CSS/table-layout for more.