Rotating table header text with CSS transforms

Question

This looks like it should be possible with the following:

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


        

Answer 1

In order to have rotated text inside your table headers:

1. Place the header content inside divs - rotate these divs rather than the header itself
2. Set the position:relative on the table headers th, position:absolute on the rotated divs.
3. Set height of th headers too

Done.

You can see it here:

Which you can see on this page if you make your window skinny - less than 1000 pixels and it rotates the table headers - http://www.rugbydata.com/

Here's the code I used:

div.rotatabletext {
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
width:0px;
text-align:left;
height:0px;
margin-left:0px;
margin-top:0px;
bottom:2px;
position:absolute;
}
table.tournamentresults > * > tr > td {
padding:1px;
}
table.tournamentresults > thead > tr:nth-child(1) > th:nth-child(1) {
height:70px;
position:relative;
}
table.tournamentresults > thead > tr:nth-child(2) th {
height:70px;
position:relative;
}