How can I control the width of a table header cell that contains rotated text?

Question

I played around with this for an hour or so before deciding that I was over my head when it comes to CSS stuff like this. Basically I am attempting to have a header cell with rotated text on my page. The rotation seemed to be simple enough--thanks stackoverflow community!--but the width of the column is not working for me. Does anyone have any tips for getting the "Overall Satisfaction" column to be narrow?

Target is for IE, although I would love to have it work in the big browsers.

You can see some of my leftovers from messing around with it... DIV's in each TH cell, height of the TR, etc. None of that is necessary for what I am trying to accomplish.

The whole point of rotating the text was to save horizontal real estate and from what I am seeing, that is not happening.

Here's my simplified try:

<style>
.rotate {
    padding: 0px 0px 0px 0px;
    margin: 0px;
}
.rotate div {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);

    writing-mode: bt-rl;

    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}
</style>

<table border=1>
    <thead>
        <tr style="line-height: 200px">
            <th><div>Facility</div></th>
            <th><div>Date</div></th>
            <th><div>Score</div></th>
            <th class="rotate"><div>Overall&nbsp;Satisfaction</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Los Angeles</td>
            <td>11/12/2010</td>
            <td>3.5</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>San Diego</td>
            <td>11/17/2010</td>
            <td>10.0</td>
            <td>10.0</td>
        </tr>
    </tody>
</table>

Answer 1

You need to apply position absolute to the div so it no longer occupies the horizontal space (the column will auto adjust to the width of the rest of the cells). Then a text-indent to reposition the element within the cell:

.rotate div {position: absolute;}

.rotate {

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    writing-mode: bt-rl;
    text-indent: -3em;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}

http://jsfiddle.net/p4EPd/

Edit: fix for ie

.rotate div {
    -webkit-transform: rotate(-90deg) translate(0, 10px);
    -moz-transform: rotate(-90deg)  translate(0, 10px);
    writing-mode: bt-rl;
    padding: 0;
    margin: 0;
    height: 125px;
}

th.rotate {padding-top: 5px;}

http://jsfiddle.net/6Xjvm/

You can apply both through use of conditional comments.

Answer 2

Just use the following css:

writing-mode: vertical-lr; transform: rotate(180deg);