如何控制包含旋转文本的表格标题单元格的宽度？

Question

在玩这样的CSS之类的东西之前,我决定在我的脑海中玩了一个小时左右.基本上我试图在我的页面上有一个带有旋转文本的标题单元格.轮换似乎很简单 - 感谢stackoverflow社区! - 但是柱子的宽度对我不起作用.有没有人有任何提示让"整体满意度"栏目缩小？

Target适用于IE,虽然我很乐意在大浏览器中使用它.

你可以看到我的一些残羹剩饭乱搞它......每个TH细胞中的DIV,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>

Answer 1

您需要将位置绝对应用于div,以便它不再占用水平空间(该列将自动调整为其余单元格的宽度).然后使用text-indent重新定位单元格中的元素:

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

编辑:修复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/

您可以通过使用条件注释来应用这两者.

Answer 2

只需使用以下CSS：

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