Containing Element Not Expanding Vertically When Content Has Rotated Text

I have a table with some th tags that contain text that is rotated via CSS. The problem I have is that the th is not expanding vertically with the content. Here is a basic exampl

Solution 1:

The containing elements can not expand, as css transformations (and IE filters) do not influence the box model.

To qoute Marco Miltenburg:

If I'm not mistaken elements are part of the normal flow or are floated as if they are not transformed. Once their position has been established, then the transformation or transition is performed. The transformation or transition will not have any influence on the document flow or any floating anymore.

You can find his answer to a similar question on SO here.

Actually, the width property of the transformed element will actually change it's visible "height" now, and the height property will change it's visible "width". In short:

With css transformations, it's the apperance that's being transformed, not the element itself or it's "influence" on the document flow.

What might help you though (case dependent):

Set the height property of each transformed element to it's width in pixels. That will influence their containers height just the way you want it.

EDIT:

As Juan Rangel said in his answer, you could go for javascript to solve the problem. I totally agree on that - what he would do with jquery is the same thing I was talking about above. If you can not tell how tall the transformed elements will be, that might even be the better solution, but keep the (small amout of) clients in mind that don't allow you to use javascript. Anyways, you'll have to compromise unfortunately.

Solution 2:

A few edits to your code.

Remove the div and add the class"rotated-text" to your th. add this javascript $(".verticalTableHeader").each(function(){$(this).height($(this).width())})

Make sure your page calls on jQuery.

http://jsfiddle.net/UPFkX/3/