I’m currently working on a UI that requires that I have a table with cells whose text is read vertically instead of horizontally. To do this, I am using CSS rotate transforms.
The problem I am running into is that the content is being measured before the render transform is taking place. This is causing my table to render incorrectly, giving wide columns instead of narrow ones.
Is there any way to fix this behavior with either css or javascript?
Not the best solution, but here’s what I came up with: http://jsfiddle.net/gJCtN/2/
Also,
vertical-alignis not supported by elements withoutdisplay:table-cellor something like it. More info.