Как я могу контролировать ширину ячейки заголовка таблицы, содержащей повернутый текст?

Я поигрался с этим в течение часа или около того, прежде чем решил, что я не в себе, когда дело касается подобных CSS-вещей. В основном я пытаюсь создать ячейку заголовка с повернутым текстом на моей странице. Вращение показалось достаточно простым - спасибо сообществу stackoverflow! - но ширина столбца мне не подходит. Есть ли у кого-нибудь советы, как сделать столбец «Общее удовлетворение» узким?

Цель - для IE, хотя я бы хотел, чтобы он работал в больших браузерах.

Вы можете увидеть некоторые из моих остатков от беспорядка вокруг него ... DIV в каждой ячейке TH, высота TR и т. д. Ничего из этого не требуется для того, что я пытаюсь выполнить.

Весь смысл поворота текста состоял в том, чтобы сохранить горизонтальное пространство и от то, что я вижу, этого не происходит.

Вот моя упрощенная попытка:

<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>