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

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，以便它不再占据水平空间(该列将自动调整为其余单元格的宽度)。然后是文本缩进以在单元格中重新定位元素:

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

您可以通过使用 conditional comments 来申请这两项.