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

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.

Just use the following css:

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