Question

在这样的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>

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/

您可以通过conditional comments使用这两种方法。

Answer 2

只需使用以下CSS：

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

Answer 3

在表级css声明中添加table-layout：fixed;这确保了表格列的宽度与您声明的完全一致，无论每个单元格中的placerd是什么图像或文本。

顺便说一下 - 而不是：

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

<强>尝试：

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

这是更少的代码和简化的方法，并解决了IE问题。

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

Answer 4

这应该是第2天的HTML TABLE课程，但事实并非如此。

css表属性：“table-layout：fixed”

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

4 个答案: