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

我花了一个小时左右的时间来研究这个问题，然后才决定，当涉及到类似CSS的东西时，我是不是有点不知所措。基本上，我试图在我的页面上有一个带有旋转文本的标题单元格。轮换似乎很简单——感谢stackoverflow社区--但是这列的宽度对我来说不合适。有人有什么建议可以缩小“总体满意度”栏的范围吗

目标是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>

.轮换{
填充：0px 0px 0px 0px；
边际：0px；
}
.旋转div{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
写入方式：bt-rl；
填充：0px 0px 0px 0px；
边际：0px；
文本对齐：左对齐；
垂直对齐：顶部；
}
设施
日期
分数
总体满意度
洛杉矶
11/12/2010
3.5
2.5
圣地亚哥
11/17/2010
10
10

您需要将绝对位置应用于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;
}

编辑：修复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;}

---

您可以通过使用表级css声明中的。

来应用这两种方法添加表布局：固定；这确保了无论在每个单元格中放置什么图像或文本，表列的宽度都与您声明的完全相同

顺便说一句，而不是：

.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; } <th><div>Facility</div></th> .轮换{ 填充：0px 0px 0px 0px； 边际：0px； } .旋转div{ -webkit变换：旋转（-90度）； -moz变换：旋转（-90度）； 写入方式：bt-rl； 填充：0px 0px 0px 0px； 边际：0px； 文本对齐：左对齐； 垂直对齐：顶部； } 设施 试试看：

.rotation { display:block; /* for firefox, safari, chrome, etc. */ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg);/* For Opera*/ -khtml-transform: rotate(-90deg);/* For Lunix*/ /* for ie */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } <th>Facility</th> .轮换{ 显示：块； /*用于firefox、safari、chrome等*/ -webkit变换：旋转（-90度）； -moz变换：旋转（-90度）； -o变换：旋转（-90度）；/*用于Opera*/ -khtml变换：旋转（-90度）；/*用于Lunix*/ /*对于ie*/ 过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）； } 设施 这是更少的代码和简化的方法，并解决了IE问题

---

（很抱歉回答上面的布局问题）

这应该是HTML表格第2课，但不是

---

css表格属性：“表格布局：固定”

只需使用以下css：

---

写入方式：垂直lr；变换：旋转（180度）
谢谢Duopixel，这在chrome中肯定会更接近它。但是IE仍然不起作用。有什么特别的建议吗？我看到的是，旋转是正确的，但是文本的位置不正确。如果没有标题行高度样式，则旋转的文本将覆盖数据行中的数据。即使我确实调整了标题行的高度，文本也不会直接位于相关列的上方而不是
填充：0？@ashleedawg不，这只是作者的原始代码。