How to align vertical text in a table?

Question

I am trying to render a table that contains vertical text in its headers at the top. As Gecko doesn't yet support writing-mode:vertical-rl , I am trying to do this using transform:rotate(90deg) . I have gotten some way to doing this:

http://jsfiddle.net/4r3qeway/

However, the text is vertically centered in the table header cells, whereas I want the text to be vertically aligned at the bottom. Is there any way I can do this? Note that I can't hard-code the heights of the cells because the header cell text will change.

Answer 1

table td {
    background-color: yellow;
    vertical-align:text-bottom;

}

Just added vertical-align:text-bottom;