This looks like it should be possible with the following:

.verticalText 
{           
    /* IE-only DX filter */
    writing-mode: tb-rl;
    filter: flipv fliph;

    /* Safari/Chrome function */
    -webkit-transform: rotate(270deg);

    /* works in latest FX builds */
    -moz-transform: rotate(270deg);
}

This works in IE.

It goes wrong in a bizarre way in Safari, Chrome and FX - the cell's size is calculated before the text is rotated!

screenshot of bug

Here is a demo: http://jsfiddle.net/HSKws/

I'm using dynamic images as a workaround, although that also has its problems. I'm happy with that as a fall-back, but it seems like there should be a way to make this CSS work - it's almost there.

Anyone know a way to make the cells fit the content after the transform has been applied?

css cross-browser
Edit
Report