CSS3 Rotating column heading in tables?

[ajmas]

I am trying to rotate column headings in a table, but I am having a few issues. My basic table layout is:

Code:

heading1	heading2 other line	heading3 slightly longer

and my CSS is as follows:

Code:

tr.rotatedHeader th {
height: 100px;
}

tr.rotatedHeader th div {
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
/* css3 */
transform: rotate(270deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

text-align: left;
}

The issue is essentially, that although all the texts are rotated, they don’t align along the bottom of the row. Does anyone know how I would solve this? IE is a secondary issue at this point, but it would be nice to get it working there too.

[Author]

Posts